ant-design/components/input/index.en-US.md
Tom Xu d44f404eae
docs: sort api (#27251)
* chore: improve sort api table scripts

* sort api

* add ignore

* Revert "sort api"

This reverts commit 343505d5f09d69349ce1fbdaea2a9faa7e852207.

* sort api

* Update package.json

* sort api

* Delete sort-api.js

* sort api

* sort api

* sort api

* fix

* Update index.zh-CN.md

* fix input-number

* fix input-number

* sort func

* fix

* Method moved to the end

* carousel method
2020-10-21 10:33:43 +08:00

4.4 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 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.

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 false 4.7.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

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