2016-08-22 09:53:39 +08:00
---
category: Components
2016-11-09 14:43:32 +08:00
type: Data Entry
2016-09-08 16:53:50 +08:00
title: Input
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.
## API
### Input
2019-11-22 14:37:39 +08:00
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| addonAfter | The label text displayed after (on the right side of) the input field. | string\|ReactNode | |
| addonBefore | The label text displayed before (on the left side of) the input field. | string\|ReactNode | |
| defaultValue | The initial input content | string | |
| disabled | Whether the input is disabled. | boolean | false |
| id | The ID for input | string | |
| maxLength | max length | number | |
| prefix | The prefix icon for the Input. | string\|ReactNode | |
| size | The size of the input box. Note: in the context of a form, the `large` size is used. Available: `large` `default` `small` | string | `default` |
| suffix | The suffix icon for the Input. | string\|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) | |
| allowClear | allow to remove input content with clear icon | boolean | |
2016-08-22 09:53:39 +08:00
2019-05-07 14:57:32 +08:00
> When `Input` is used in a `Form.Item` context, if the `Form.Item` has the `id` and `options` props defined then `value`, `defaultValue`, and `id` props of `Input` are automatically set.
2016-08-22 09:53:39 +08:00
2017-09-04 15:24:08 +08:00
The rest of the props of Input are exactly the same as the original [input ](https://facebook.github.io/react/docs/events.html#supported-events ).
2017-01-09 22:03:10 +08:00
2017-05-22 14:44:58 +08:00
### Input.TextArea
2019-11-22 14:37:39 +08:00
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| autoSize | Height autosize feature, can be set to `true|false` or an object `{ minRows: 2, maxRows: 6 }` . | boolean\|object | false |
| defaultValue | The initial input content | string | |
| value | The input content value | string | |
| onPressEnter | The callback function that is triggered when Enter key is pressed. | function(e) | |
| allowClear | allow to remove input content with clear icon | boolean | |
2019-12-25 22:02:19 +08:00
| 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
2019-11-22 14:37:39 +08:00
| Property | Description | Type | Default |
| --- | --- | --- | --- |
2020-01-29 21:44:34 +08:00
| enterButton | to show an enter button after input. This property conflicts with the `addonAfter` property. | boolean\|ReactNode | false |
2019-11-22 14:37:39 +08:00
| onSearch | The callback function triggered when you click on the search-icon, the clear-icon or press the Enter key. | function(value, event) | |
| loading | Search box with loading. | boolean | |
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
2016-08-22 09:53:39 +08:00
#### Input.Group
2019-11-22 14:37:39 +08:00
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| compact | Whether use compact style | boolean | false |
| size | The size of `Input.Group` specifies the size of the included `Input` fields. Available: `large` `default` `small` | string | `default` |
2016-08-22 09:53:39 +08:00
2019-12-26 14:37:39 +08:00
```jsx
2016-12-05 13:05:58 +08:00
< Input.Group >
2019-05-07 14:57:32 +08:00
< input / >
< input / >
2016-08-22 09:53:39 +08:00
< / Input.Group >
```
2018-11-29 10:03:16 +08:00
2019-11-22 14:37:39 +08:00
#### Input.Password
2018-11-29 10:03:16 +08:00
2019-11-22 14:37:39 +08:00
| Property | Description | Type | Default |
| ---------------- | -------------------------- | ------- | ------- |
| visibilityToggle | Whether show toggle button | boolean | true |
2019-02-20 15:12:29 +08:00
## FAQ
### Why Input lose focus when change `prefix/suffix`
2019-05-07 14:57:32 +08:00
When Input dynamic add or remove `prefix/suffix` 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
```