• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Text Input
2
3
4The **\<TextInput>** and **\<TextArea>** components are input components typically used to accept input from the user, such as comments, chat messages, and table content. They can be used in combination with other components to meet more diversified purposes, for example, login and registration. For details, see [TextInput](../reference/arkui-ts/ts-basic-components-textinput.md) and [TextArea](../reference/arkui-ts/ts-basic-components-textarea.md).
5
6
7## Creating a Text Box
8
9The **\<TextInput>** component provides single-line text input, while the **\<TextArea>** component provides multi-line text input. To create these components, use the following APIs:
10
11
12```ts
13TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})
14```
15
16
17
18```ts
19TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})
20```
21
22
23- Single-line text box
24
25  ```ts
26  TextInput()
27  ```
28
29  ![en-us_image_0000001511580844](figures/en-us_image_0000001511580844.png)
30
31
32- Multi-line text box
33
34  ```ts
35  TextArea()
36  ```
37
38  ![en-us_image_0000001562940481](figures/en-us_image_0000001562940481.png)
39
40  The **\<TextArea>** component automatically wraps text so that each line does not have more than the width of the component.
41
42
43  ```ts
44  TextArea({text:"I am TextArea I am TextArea I am TextArea"}).width(300)
45  ```
46
47  ![en-us_image_0000001511580836](figures/en-us_image_0000001511580836.png)
48
49
50## Setting the Input Box Type
51
52The **\<TextInput>** component comes in five types. You can specify its type by setting the **type** parameter to any of the following: **Normal**, **Password**, **Email**, **Number**, and **PhoneNumber**.
53
54
55- Normal type (default type)
56
57  ```ts
58  TextInput()
59    .type(InputType.Normal)
60  ```
61
62  ![en-us_image_0000001562820765](figures/en-us_image_0000001562820765.png)
63
64- Password type
65
66  ```ts
67  TextInput()
68    .type(InputType.Password)
69  ```
70
71  ![en-us_image_0000001511580840](figures/en-us_image_0000001511580840.png)
72
73
74## Setting Styles
75
76- Set the placeholder text displayed when there is no input.
77  TextInput({placeholder:'I am placeholder text'})
78
79
80  ```ts
81  TextInput({placeholder:'I am placeholder text'})
82  ```
83
84  ![en-us_image_0000001511900400](figures/en-us_image_0000001511900400.png)
85
86
87- Set the current text input.
88
89  ```ts
90  TextInput({placeholder:'I am placeholder text',text:'I am current text input'})
91  ```
92
93  ![en-us_image_0000001562820761](figures/en-us_image_0000001562820761.png)
94
95- Use **backgroundColor** to set the background color of the text box.
96
97  ```ts
98  TextInput({placeholder:'I am placeholder text',text:'I am current text input'})
99    .backgroundColor(Color.Pink)
100  ```
101
102  ![en-us_image_0000001511740444](figures/en-us_image_0000001511740444.png)
103
104  More styles can be implemented by leveraging the [universal attributes](../reference/arkui-ts/ts-universal-attributes-size.md).
105
106
107## Adding Events
108
109You can add the **onChange** event for the text box to obtain its content changes. You can also add the universal events to implement user interactions.
110
111
112
113```ts
114TextInput()
115  .onChange((value: string) => {
116    console.info(value);
117  })
118  .onFocus(() => {
119    console.info ('Get Focus');
120  })
121```
122
123
124## Example Scenario
125
126In this example, the text box is used to submit forms on the user login or registration page.
127
128
129
130```ts
131@Entry
132@Component
133struct TextInputSample {
134  build() {
135    Column() {
136      TextInput({ placeholder: 'input your username' }).margin({ top: 20 })
137        .onSubmit((EnterKeyType)=>{
138          console.info(EnterKeyType+'Enter key type')
139        })
140      TextInput({ placeholder: 'input your password' }).type(InputType.Password).margin({ top: 20 })
141        .onSubmit((EnterKeyType)=>{
142          console.info(EnterKeyType+'Enter key type')
143        })
144      Button('Sign in').width(150).margin({ top: 20 })
145    }.padding(20)
146  }
147}
148```
149
150
151![en-us_image_0000001563060653](figures/en-us_image_0000001563060653.png)
152