API
Input
| Property |
Description |
Type |
Default |
| addonAfter |
The label text displayed after (on the right side of) the input field. |
string|slot |
|
| addonBefore |
The label text displayed before (on the left side of) the input field. |
string|slot |
|
| defaultValue |
The initial input content |
string |
|
| disabled |
Whether the input is disabled. |
boolean |
false |
| id |
The ID for input |
string |
|
| prefix |
The prefix icon for the Input. |
string|slot |
|
| 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|slot |
|
| type |
The type of input, see: MDN(use Input.TextArea instead of type="textarea") |
string |
text |
| value(v-model) |
The input content value |
string |
|
| allowClear |
allow to remove input content with clear icon |
boolean |
|
Input Events
| Events Name |
Description |
Arguments |
| change |
callback when user input |
function(e) |
| pressEnter |
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 and options props defined
then value, defaultValue, and id props of Input are automatically set.
Input.TextArea
| Property |
Description |
Type |
Default |
| autosize |
Height autosize feature, can be set to `true |
falseor an object{ minRows: 2, maxRows: 6 }` |
boolean|object |
| defaultValue |
The initial input content |
string |
|
| value(v-model) |
The input content value |
string |
|
Input.TextArea Events
| Events Name |
Description |
Arguments |
| pressEnter |
The callback function that is triggered when Enter key is pressed. |
function(e) |
The rest of the props of Input.TextArea are the same as the original textarea.
Input.Search
| Property |
Description |
Type |
Default |
| enterButton |
to show an enter button after input. This prop is conflict with addon. |
boolean|slot |
false |
Input.Search Events
| Events Name |
Description |
Arguments |
| search |
The callback function that is triggered when you click on the search-icon or press 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 |
<a-input-group>
<a-input />
<a-input />
</a-input-group>
Input.Password
| Property |
Description |
Type |
Default |
| visibilityToggle |
Whether show toggle button |
boolean |
true |
FAQ
Why Input lose focus when change prefix/suffix
When Input dynamic add or remove prefix/suffix will make Vue 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} />