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