ant-design-vue/components/input/index.en-US.md
2019-04-07 17:19:18 +08:00

3.5 KiB

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} />