2016-08-22 09:53:39 +08:00
---
category: Components
2022-11-09 12:28:04 +08:00
group: Data Entry
2016-09-08 16:53:50 +08:00
title: Input
2022-11-30 20:14:41 +08:00
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Y3R0RowXHlAAAAAAAAAAAAAADrJ8AQ/original
2023-02-09 22:17:31 +08:00
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sBqqTatJ-AkAAAAAAAAAAAAADrJ8AQ/original
2022-11-09 12:28:04 +08:00
demo:
cols: 2
2016-08-22 09:53:39 +08:00
---
2019-05-07 14:57:32 +08:00
A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.
2016-08-22 09:53:39 +08:00
2016-09-10 13:43:30 +08:00
## When To Use
2016-08-22 09:53:39 +08:00
- A user input in a form field is needed.
- A search input is required.
2022-11-09 12:28:04 +08:00
## Examples
2022-11-17 17:31:26 +08:00
<!-- prettier - ignore -->
2022-11-09 12:28:04 +08:00
< code src = "./demo/basic.tsx" > Basic usage< / code >
< code src = "./demo/size.tsx" > Three sizes of Input< / code >
< code src = "./demo/addon.tsx" > Pre / Post tab< / code >
2023-03-09 21:26:56 +08:00
< code src = "./demo/compact-style.tsx" > Compact Style< / code >
< code src = "./demo/group.tsx" debug > Input Group< / code >
2022-11-09 12:28:04 +08:00
< code src = "./demo/search-input.tsx" > Search box< / code >
< code src = "./demo/search-input-loading.tsx" > Search box with loading< / code >
< code src = "./demo/textarea.tsx" > TextArea< / code >
< code src = "./demo/autosize-textarea.tsx" > Autosizing the height to fit the content< / code >
< code src = "./demo/tooltip.tsx" > Format Tooltip Input< / code >
< code src = "./demo/presuffix.tsx" > prefix and suffix< / code >
< code src = "./demo/password-input.tsx" > Password box< / code >
< code src = "./demo/allowClear.tsx" > With clear icon< / code >
< code src = "./demo/show-count.tsx" > With character counting< / code >
< code src = "./demo/textarea-show-count.tsx" > Textarea with character counting< / code >
< code src = "./demo/status.tsx" > Status< / code >
< code src = "./demo/borderless.tsx" > Borderless< / code >
< code src = "./demo/focus.tsx" > Focus< / code >
< code src = "./demo/borderless-debug.tsx" debug > Style Debug< / code >
< code src = "./demo/align.tsx" debug > Text Align< / code >
< code src = "./demo/textarea-resize.tsx" debug > TextArea< / code >
< code src = "./demo/debug-addon.tsx" debug > debug Pre / Post tab< / code >
2016-08-22 09:53:39 +08:00
## API
2023-08-08 18:27:48 +08:00
Common props ref: [Common props](/docs/react/common-props)
2016-08-22 09:53:39 +08:00
### Input
2022-11-17 17:31:26 +08:00
| 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 |
2023-03-28 09:57:55 +08:00
| classNames | Semantic DOM class | Record< [SemanticDOM](#input-1), string> | - | 5.4.0 |
2022-11-17 17:31:26 +08:00
| defaultValue | The initial input content | string | - | |
| disabled | Whether the input is disabled | boolean | false | |
| id | The ID for input | string | - | |
2023-05-05 14:47:18 +08:00
| 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 |
2022-11-17 17:31:26 +08:00
| status | Set validation status | 'error' \| 'warning' | - | 4.19.0 |
2023-03-28 09:57:55 +08:00
| styles | Semantic DOM style | Record< [SemanticDOM](#input-1), CSSProperties> | - | 5.4.0 |
2022-11-17 17:31:26 +08:00
| 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 ](https://developer.mozilla.org/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types )( 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) | - | |
2016-08-22 09:53:39 +08:00
2023-05-17 10:39:38 +08:00
> 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.
2016-08-22 09:53:39 +08:00
2021-01-01 21:40:00 +08:00
The rest of the props of Input are exactly the same as the original [input ](https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes ).
2017-01-09 22:03:10 +08:00
2017-05-22 14:44:58 +08:00
### Input.TextArea
2022-11-17 17:31:26 +08:00
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
2023-07-27 11:58:26 +08:00
| allowClear | Customize clear icon | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: Support object type |
2022-11-17 17:31:26 +08:00
| 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 |
2023-03-28 09:57:55 +08:00
| classNames | Semantic DOM class | Record< [SemanticDOM](#inputtextarea-1), string> | - | 5.4.0 |
2022-11-17 17:31:26 +08:00
| defaultValue | The initial input content | string | - | |
2023-05-05 14:47:18 +08:00
| 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 |
2023-03-28 09:57:55 +08:00
| styles | Semantic DOM style | Record< [SemanticDOM](#inputtextarea-1), CSSProperties> | - | 5.4.0 |
2022-11-17 17:31:26 +08:00
| 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 }) | - | |
2017-05-22 14:44:58 +08:00
2017-09-04 15:24:08 +08:00
The rest of the props of `Input.TextArea` are the same as the original [textarea ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea ).
2017-01-09 22:03:10 +08:00
2016-11-24 14:03:57 +08:00
#### Input.Search
2022-11-17 17:31:26 +08:00
| 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) | - |
2016-11-24 14:56:08 +08:00
2017-09-04 15:24:08 +08:00
Supports all props of `Input` .
2016-11-24 14:03:57 +08:00
2019-11-22 14:37:39 +08:00
#### Input.Password
2018-11-29 10:03:16 +08:00
2022-11-17 17:31:26 +08:00
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| iconRender | Custom toggle button | (visible) => ReactNode | (visible) => (visible ? < EyeOutlined /> : < EyeInvisibleOutlined />) | 4.3.0 |
2022-12-22 14:12:26 +08:00
| visibilityToggle | Whether show toggle button or control password visible | boolean \| [VisibilityToggle ](#visibilitytoggle ) | true | |
2022-10-31 21:15:59 +08:00
#### VisibilityToggle
2022-11-17 17:31:26 +08:00
| 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 |
2019-02-20 15:12:29 +08:00
2020-12-29 22:42:04 +08:00
#### Input Methods
2022-11-17 17:31:26 +08:00
| Name | Description | Parameters | Version |
| --- | --- | --- | --- |
| blur | Remove focus | - | |
| focus | Get focus | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | option - 4.10.0 |
2020-12-29 22:42:04 +08:00
2023-03-29 20:32:01 +08:00
### Semantic DOM
#### Input
<!-- prettier - ignore -->
| 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
<!-- prettier - ignore -->
| Property | Description | Version |
| --- | --- | --- |
| textarea | `textarea` element | 5.4.0 |
| count | Text count element | 5.4.0 |
2023-03-23 17:17:28 +08:00
## Design Token
< ComponentTokenTable component = "Input" > < / ComponentTokenTable >
2019-02-20 15:12:29 +08:00
## FAQ
2022-04-20 10:33:42 +08:00
### Why Input lose focus when change `prefix/suffix/showCount`
2019-02-20 15:12:29 +08:00
2022-04-20 10:33:42 +08:00
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:
2019-02-20 15:12:29 +08:00
```jsx
const suffix = condition ? < Icon type = "smile" / > : < span / > ;
2019-05-07 14:57:32 +08:00
< Input suffix = {suffix} / > ;
2019-02-20 15:12:29 +08:00
```
2021-03-23 15:03:47 +08:00
### 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.