Input

When To Use

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

Examples

<code src="./demo/basic.tsx">Basic usage</code> <code src="./demo/size.tsx">Three sizes of Input</code> <code src="./demo/variant.tsx" version="5.13.0">Variants</code> <code src="./demo/filled-debug.tsx" debug>Filled Debug</code> <code src="./demo/addon.tsx" debug>Pre / Post tab</code> <code src="./demo/compact-style.tsx">Compact Style</code> <code src="./demo/group.tsx" debug>Input Group</code> <code src="./demo/search-input.tsx">Search box</code> <code src="./demo/search-input-loading.tsx">Search box with loading</code> <code src="./demo/textarea.tsx">TextArea</code> <code src="./demo/autosize-textarea.tsx">Autosizing the height to fit the content</code> <code src="./demo/otp.tsx" version="5.16.0">OTP</code> <code src="./demo/tooltip.tsx">Format Tooltip Input</code> <code src="./demo/presuffix.tsx">prefix and suffix</code> <code src="./demo/password-input.tsx">Password box</code> <code src="./demo/allowClear.tsx">With clear icon</code> <code src="./demo/show-count.tsx">With character counting</code> <code src="./demo/advance-count.tsx" version=">= 5.10.0">Custom count logic</code> <code src="./demo/status.tsx">Status</code> <code src="./demo/focus.tsx">Focus</code> <code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code> <code src="./demo/borderless-debug.tsx" debug>Style Debug</code> <code src="./demo/align.tsx" debug>Text Align</code> <code src="./demo/textarea-resize.tsx" debug>TextArea</code> <code src="./demo/debug-addon.tsx" debug>debug Pre / Post tab</code> <code src="./demo/component-token.tsx" debug>debug token</code>

API

Common props ref：Common props

Input

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:

The rest of the props of Input.TextArea are the same as the original textarea.

Input.Search

Supports all props of Input.

Input.Password

Input.OTP

Added in 5.16.0.

Notes for developers

When the mask prop is string, we recommend receiving a single character or a single emoji. If multiple characters or multiple emoji are passed, a warning will be thrown.

VisibilityToggle

Input Methods

Semantic DOM

Input {#semantic-input}

<code src="./demo/_semantic_input.tsx" simplify="true"></code>

Input.TextArea {#semantic-textarea}

<code src="./demo/_semantic_textarea.tsx" simplify="true"></code>

Input.Search {#semantic-search}

<code src="./demo/_semantic_search.tsx" simplify="true"></code>

Input.Password {#semantic-password}

<code src="./demo/_semantic_password.tsx" simplify="true"></code>

Input.OTP {#semantic-otp}

<code src="./demo/_semantic_otp.tsx" simplify="true"></code>

Design Token

<ComponentTokenTable component="Input"></ComponentTokenTable>

FAQ

Why Input loses focus when change prefix/suffix/showCount {#faq-lose-focus}

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? {#faq-textarea-exceed-max}

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