A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.
When To Use
- A user input in a form field is needed.
- A search input is required.
Examples
Basic usage
Three sizes of Input
Pre / Post tab
Compact Style
Input Group
Search box
Search box with loading
TextArea
Autosizing the height to fit the content
Format Tooltip Input
prefix and suffix
Password box
With clear icon
With character counting
Textarea with character counting
Status
Borderless
Focus
Style Debug
Text Align
TextArea
debug Pre / Post tab
API
Input
| Property |
Description |
Type |
Default |
Version |
| addonAfter |
The label text displayed after (on the right side of) the input field |
ReactNode |
- |
|
| addonBefore |
The label text displayed before (on the left side of) the input field |
ReactNode |
- |
|
| allowClear |
If allow to remove input content with clear icon |
boolean | { clearIcon: ReactNode } |
false |
|
| bordered |
Whether has border style |
boolean |
true |
4.5.0 |
| classNames |
Semantic DOM class |
Record<SemanticDOM, string> |
- |
5.4.0 |
| defaultValue |
The initial input content |
string |
- |
|
| disabled |
Whether the input is disabled |
boolean |
false |
|
| id |
The ID for input |
string |
- |
|
| maxLength |
The maximum number of characters in Input |
number |
- |
|
| showCount |
Whether to show character count |
boolean | { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode } |
false |
4.18.0 info.value: 4.23.0 |
| status |
Set validation status |
'error' | 'warning' |
- |
4.19.0 |
| styles |
Semantic DOM style |
Record<SemanticDOM, CSSProperties> |
- |
5.4.0 |
| prefix |
The prefix icon for the Input |
ReactNode |
- |
|
| size |
The size of the input box. Note: in the context of a form, the middle size is used |
large | middle | small |
- |
|
| suffix |
The suffix icon for the Input |
ReactNode |
- |
|
| type |
The type of input, see: MDN( use Input.TextArea instead of type="textarea") |
string |
text |
|
| value |
The input content value |
string |
- |
|
| onChange |
Callback when user input |
function(e) |
- |
|
| onPressEnter |
The callback function that is triggered when Enter key is pressed |
function(e) |
- |
|
When Input is used in a Form.Item context, if the Form.Item has the id props defined then value, defaultValue, and id props of Input are automatically set.
The rest of the props of Input are exactly the same as the original input.
Input.TextArea
| Property |
Description |
Type |
Default |
Version |
| allowClear |
Customize clear icon |
boolean | { clearIcon?: ReactNode } |
false |
5.8.0: Support object type |
| autoSize |
Height autosize feature, can be set to true | false or an object { minRows: 2, maxRows: 6 } |
boolean | object |
false |
|
| bordered |
Whether has border style |
boolean |
true |
4.5.0 |
| classNames |
Semantic DOM class |
Record<SemanticDOM, string> |
- |
5.4.0 |
| defaultValue |
The initial input content |
string |
- |
|
| maxLength |
The maximum number of characters in TextArea |
number |
- |
4.7.0 |
| showCount |
Whether to show character count |
boolean | { formatter: (info: { value: string, count: number, maxLength?: number }) => string } |
false |
4.7.0 formatter: 4.10.0 info.value: 4.23.0 |
| styles |
Semantic DOM style |
Record<SemanticDOM, CSSProperties> |
- |
5.4.0 |
| value |
The input content value |
string |
- |
|
| onPressEnter |
The callback function that is triggered when Enter key is pressed |
function(e) |
- |
|
| onResize |
The callback function that is triggered when resize |
function({ width, height }) |
- |
|
The rest of the props of Input.TextArea are the same as the original textarea.
Input.Search
| Property |
Description |
Type |
Default |
| enterButton |
Whether to show an enter button after input. This property conflicts with the addonAfter property |
boolean | ReactNode |
false |
| loading |
Search box with loading |
boolean |
false |
| onSearch |
The callback function triggered when you click on the search-icon, the clear-icon or press the Enter key |
function(value, event) |
- |
Supports all props of Input.
Input.Password
| Property |
Description |
Type |
Default |
Version |
| iconRender |
Custom toggle button |
(visible) => ReactNode |
(visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />) |
4.3.0 |
| visibilityToggle |
Whether show toggle button or control password visible |
boolean | VisibilityToggle |
true |
|
VisibilityToggle
| Property |
Description |
Type |
Default |
Version |
| visible |
Whether the password is show or hide |
boolean |
false |
4.24.0 |
| onVisibleChange |
Callback executed when visibility of the password is changed |
boolean |
- |
4.24.0 |
Input Methods
| Name |
Description |
Parameters |
Version |
| blur |
Remove focus |
- |
|
| focus |
Get focus |
(option?: { preventScroll?: boolean, cursor?: 'start' | 'end' | 'all' }) |
option - 4.10.0 |
Semantic DOM
Input
| Property |
Description |
Version |
| input |
input element |
5.4.0 |
| prefix |
Wrapper of prefix |
5.4.0 |
| suffix |
Wrapper of suffix |
5.4.0 |
| count |
Text count element |
5.4.0 |
Input.TextArea
| Property |
Description |
Version |
| textarea |
textarea element |
5.4.0 |
| count |
Text count element |
5.4.0 |
Design Token
FAQ
Why Input lose focus when change prefix/suffix/showCount
When Input dynamic add or remove prefix/suffix/showCount will make React recreate the dom structure and new input will be not focused. You can set an empty <span /> element to keep the dom structure:
const suffix = condition ? <Icon type="smile" /> : <span />;
<Input suffix={suffix} />;
Why TextArea in control can make value exceed maxLength?
When in control, component should show as what it set to avoid submit value not align with store value in Form.
