ant-design/components/input/index.en-US.md
二货爱吃白萝卜 100fa29bef
feat: Input.OTP component support (#48076)
* chore: basic control

* chore: input instad

* docs: update demo

* chore: adjust operation interactive

* chore: lock selection

* chore: fix patch logic

* chore: merge logic

* chore: patch autoFocus

* test: update snapshot

* test: add test case

* test: coverage

* chore: update size limit

* docs: update docs

* test: fix test case

* chore: update comment

* refactor: change to length

* chore: blur all

* chore: size limit
2024-03-28 14:05:58 +08:00

8.5 KiB
Raw Blame History

category group title description cover coverDark demo
Components Data Entry Input Through mouse or keyboard input content, it is the most basic form field wrapper. https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Y3R0RowXHlAAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sBqqTatJ-AkAAAAAAAAAAAAADrJ8AQ/original
cols
2

When To Use

  • A user input in a form field is needed.
  • A search input is required.

Examples

Basic usage Three sizes of Input Variants Filled Debug Pre / Post tab Compact Style Input Group Search box Search box with loading TextArea Autosizing the height to fit the content OTP Format Tooltip Input prefix and suffix Password box With clear icon With character counting Custom count logic Status Focus Style Debug Text Align TextArea debug Pre / Post tab debug token

API

Common props refCommon props

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 | { clearIcon: ReactNode } false
classNames Semantic DOM class Record<SemanticDOM, string> - 5.4.0
count Character count config CountConfig - 5.10.0
defaultValue The initial input content string -
disabled Whether the input is disabled boolean false
id The ID for input string -
maxLength The maximum number of characters in Input number -
prefix The prefix icon for the Input ReactNode -
showCount Whether to show character count boolean | { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode } false 4.18.0 info.value: 4.23.0
status Set validation status 'error' | 'warning' - 4.19.0
styles Semantic DOM style Record<SemanticDOM, CSSProperties> - 5.4.0
size The size of the input box. Note: in the context of a form, the middle 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 -
variant Variants of Input outlined | borderless | filled outlined 5.13.0
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 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.

CountConfig

interface CountConfig {
  // Max character count. Different from the native `maxLength`, it will be marked warning but not truncated
  max?: number;
  // Custom character count, for example, the standard emoji length is greater than 1, you can customize the counting strategy to change it to 1
  strategy?: (value: string) => number;
  // Same as `showCount`
  show?: boolean | ((args: { value: string; count: number; maxLength?: number }) => ReactNode);
  // Custom clipping logic when the number of characters exceeds `count.max`, no clipping when not configured
  exceedFormatter?: (value: string, config: { max: number }) => string;
}

Input.TextArea

Same as Input, and more:

Property Description Type Default Version
autoSize Height auto size feature, can be set to true | false or an object { minRows: 2, maxRows: 6 } boolean | object false
classNames Semantic DOM class Record<SemanticDOM, string> - 5.4.0
styles Semantic DOM style Record<SemanticDOM, CSSProperties> - 5.4.0

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 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, { source: "input" | "clear" }) -

Supports all props of Input.

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 or control password visible boolean | VisibilityToggle true

Input.OTP

Added in 5.16.0.

Property Description Type Default Version
defaultValue Default value string -
disabled Whether the input is disabled boolean false
formatter Format display, blank fields will be filled with (value: string) => string -
length The number of input elements number 6
status Set validation status 'error' | 'warning' -
size The size of the input box small | middle | large middle
variant Variants of Input outlined | borderless | filled outlined
value The input content value string -
onChange Trigger when all the fields are filled function(value: string) -

VisibilityToggle

Property Description Type Default Version
visible Whether the password is show or hide boolean false 4.24.0
onVisibleChange Callback executed when visibility of the password is changed (visible) => void - 4.24.0

Input Methods

Name Description Parameters Version
blur Remove focus -
focus Get focus (option?: { preventScroll?: boolean, cursor?: 'start' | 'end' | 'all' }) option - 4.10.0

Semantic DOM

Input

Input.TextArea

Design Token

FAQ

Why Input lose focus when change prefix/suffix/showCount

When Input dynamic add or remove prefix/suffix/showCount 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} />;

Why TextArea in control can make value exceed maxLength?

When in control, component should show as what it set to avoid submit value not align with store value in Form.