mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-12 11:55:23 +08:00
4.8 KiB
4.8 KiB
category | type | title | cover |
---|---|---|---|
Components | Data Entry | Input | https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg |
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.
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 | false | |
bordered | Whether has border style | boolean | true | 4.5.0 |
defaultValue | The initial input content | string | - | |
disabled | Whether the input is disabled | boolean | false | |
id | The ID for input | string | - | |
maxLength | The max length | number | - | |
prefix | The prefix icon for the Input | ReactNode | - | |
size | The size of the input box. Note: in the context of a form, the large 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 aForm.Item
context, if theForm.Item
has theid
andoptions
props defined thenvalue
,defaultValue
, andid
props ofInput
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 | If allow to remove input content with clear icon | boolean | false | |
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 |
defaultValue | The initial input content | string | - | |
maxLength | The max length | number | - | 4.7.0 |
showCount | Whether show text count | boolean | { formatter: ({ count: number, maxLength?: number }) => string } | false | 4.7.0 (formatter: 4.10.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.Group
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 |
<Input.Group>
<input />
<input />
</Input.Group>
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 | boolean | true |
Input Methods
Name | Description | Parameters | Version |
---|---|---|---|
blur | Remove focus | - | |
focus | Get focus | (option?: { preventScroll?: boolean, cursor?: 'start' | 'end' | 'all' }) | option - 4.10.0 |
FAQ
Why Input lose focus when change prefix/suffix
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:
const suffix = condition ? <Icon type="smile" /> : <span />;
<Input suffix={suffix} />;