Input
A field for one line of text, with text area, password, search and one-time code fields alongside it.
Anotomy
Structure of the input and its four relatives, and how their parts are composed. These are their semantic parts, so they are also what the
classNames and styles objects accept. Each block numbers its own parts.Input
| Name | Description | |
|---|---|---|
1 | root | The field's box: border, background, radius and padding. variant, size and status change it here. |
2 | prefix | The node from prefix, before the text. Usually an icon or a unit. |
3 | input | The real <input>, which takes the free width. |
4 | suffix | The trailing area. It holds the clear button, the count and the node from suffix, in that order. |
5 | clear | The button that empties the field, drawn when allowClear is set and there is a value. |
6 | count | The character count, drawn when showCount is set. With maxLength it reads as used out of allowed. |
Input.TextArea
| Name | Description | |
|---|---|---|
1 | root | The field's box. autoSize lets it grow with the text. |
2 | textarea | The real <textarea>. |
3 | clear | The button that empties the field, drawn when allowClear is set and there is a value. |
4 | count | The character count under the field, from showCount or count. |
Input.Password
| Name | Description | |
|---|---|---|
1 | root | The field's box. |
2 | prefix | The node from prefix, before the value. |
3 | input | The real <input type="password">, which shows dots until the value is revealed. |
4 | suffix | The trailing area holding the eye button from visibilityToggle. iconRender replaces its icon. |
5 | clear | The button that empties the field, drawn when allowClear is set. |
Input.Search
| Name | Description | |
|---|---|---|
1 | root | The field and the search button together. |
2 | prefix | The node from prefix, before the text. |
3 | input | The real <input>. |
4 | clear | The button that empties the field, drawn when allowClear is set. |
5 | count | The character count, drawn when showCount is set. |
6 | suffix | The node from suffix, at the end of the field. |
7 | button.root | The search button, from enterButton. |
8 | button.icon | The button's icon, a spinner while loading is set. |
9 | button.content | The button's text, when enterButton is a string. |
Input.OTP
| Name | Description | |
|---|---|---|
1 | root | The row of cells. |
2 | input | One cell, a real <input> for one character. length sets how many, and mask hides what is typed. |
3 | separator | The node between two cells, from separator. |
© 2026 AntUIKit . All rights reserved.