Input

Through mouse or keyboard input content, it is the most basic form field wrapper.

When To Use

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

Examples

• Basic usage · basic

• Three sizes of Input · size

• Variants · variant

• Compact Style · compact-style

• Search box · search-input

• Search box with loading · search-input-loading

• TextArea · textarea

• Autosizing the height to fit the content · autosize-textarea

• OTP · otp

• Format Tooltip Input · tooltip

• prefix and suffix · presuffix

• Password box · password-input

• With clear icon · allowClear

• With character counting · show-count

• Custom count logic · advance-count

• Status · status

• Focus · focus

• Custom semantic dom styling · style-class

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 description source: vendor/components/input/demo/_semantic_input.tsx

Input.TextArea

Semantic description source: vendor/components/input/demo/_semantic_textarea.tsx

Input.Search

Semantic description source: vendor/components/input/demo/_semantic_search.tsx

Input.Password

Semantic description source: vendor/components/input/demo/_semantic_password.tsx

Input.OTP

Semantic description source: vendor/components/input/demo/_semantic_otp.tsx

Design Token

Types, inheritance and declarations retain the pinned native source. Defaults are computed by the native theme and may be overridden by ConfigProvider; this table does not invent static defaults.

Native ComponentToken declares no directly extractable own fields. Shared tokens and inheritance are defined by the declarations below.

Declaration source: vendor/components/input/style/token.ts

import { mergeToken } from '../../theme/internal';

import type { AliasToken, FullToken } from '../../theme/internal';

export interface SharedComponentToken {
  /**
   * @desc 输入框横向内边距
   * @descEN Horizontal padding of input
   */
  paddingInline: number;
  /**
   * @desc 小号输入框横向内边距
   * @descEN Horizontal padding of small input
   */
  paddingInlineSM: number;
  /**
   * @desc 大号输入框横向内边距
   * @descEN Horizontal padding of large input
   */
  paddingInlineLG: number;
  /**
   * @desc 输入框纵向内边距
   * @descEN Vertical padding of input
   */
  paddingBlock: number;
  /**
   * @desc 小号输入框纵向内边距
   * @descEN Vertical padding of small input
   */
  paddingBlockSM: number;
  /**
   * @desc 大号输入框纵向内边距
   * @descEN Vertical padding of large input
   */
  paddingBlockLG: number;
  /**
   * @desc 前/后置标签背景色
   * @descEN Background color of addon
   */
  addonBg: string;
  /**
   * @desc 悬浮态边框色
   * @descEN Hover border color
   */
  hoverBorderColor: string;
  /**
   * @desc 激活态边框色
   * @descEN Active border color
   */
  activeBorderColor: string;
  /**
   * @desc 激活态阴影
   * @descEN Box-shadow when active
   */
  activeShadow: string;
  /**
   * @desc 错误状态时激活态阴影
   * @descEN Box-shadow when active in error status
   */
  errorActiveShadow: string;
  /**
   * @desc 警告状态时激活态阴影
   * @descEN Box-shadow when active in warning status
   */
  warningActiveShadow: string;
  /**
   * @desc 输入框hover状态时背景颜色
   * @descEN Background color when the input box hovers
   */
  hoverBg: string;
  /**
   * @desc 输入框激活状态时背景颜色
   * @descEN Background color when the input box is activated
   */
  activeBg: string;
  /**
   * @desc 字体大小
   * @descEN Font size
   */
  inputFontSize: number;
  /**
   * @desc 大号字体大小
   * @descEN Font size of large
   */
  inputFontSizeLG: number;
  /**
   * @desc 小号字体大小
   * @descEN Font size of small
   */
  inputFontSizeSM: number;
}

export interface ComponentToken extends SharedComponentToken {}

export interface SharedInputToken {
  inputAffixPadding: number;
}

export interface InputToken extends FullToken<'Input'>, SharedInputToken {}

FAQ

Why Input loses 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.

Shared native props

Tips: The following generic properties apply to most antd components; those not supported are described separately.

Install and reproduce an example

npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23

Use ConfigProvider and native App; configure dayjs locale separately. Each example lists its complete source files and additional pinned dependencies in View code. Example names select demos, not universal component props. See the resource setup guide for theme, locale and SSR.

Native type references

The source viewer includes unchanged native implementations and the following source declarations. Inherited types remain in their native packages. English source comments are preserved as code reference.

• vendor/components/input/Group.tsx
• vendor/components/input/Input.tsx
• vendor/components/input/OTP/OTPInput.tsx
• vendor/components/input/OTP/index.tsx
• vendor/components/input/Password.tsx
• vendor/components/input/Search.tsx
• vendor/components/input/TextArea.tsx
• vendor/components/input/index.tsx
• vendor/components/input/style/token.ts

Source and license

https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd

Original bilingual prose and executable examples are retained. Website-only embeds and token tables are expanded locally. Ant Design is MIT; separately listed dependency notices also apply. Upload previews block outbound requests and do not provide a backend.