输入框

通过鼠标或键盘输入内容，是最基础的表单域的包装。

何时使用

• 需要用户输入表单域内容时。
• 提供组合型输入框，带搜索的输入框，还可以进行大小选择。

代码演示

• 基本使用 · basic

• 三种大小 · size

• 形态变体 · variant

• 紧凑模式 · compact-style

• 搜索框 · search-input

• 搜索框 loading · search-input-loading

• 文本域 · textarea

• 适应文本高度的文本域 · autosize-textarea

• 一次性密码框 · otp

• 输入时格式化展示 · tooltip

• 前缀和后缀 · presuffix

• 密码框 · password-input

• 带移除图标 · allowClear

• 带字数提示 · show-count

• 定制计数能力 · advance-count

• 自定义状态 · status

• 聚焦 · focus

• 自定义语义结构的样式和类 · style-class

API

通用属性参考：通用属性

Input

如果 Input 在 Form.Item 内，并且 Form.Item 设置了 id 属性，则 value defaultValue 和 id 属性会被自动设置。

Input 的其他属性和 React 自带的 input 一致。

CountConfig

interface CountConfig {
  // 最大字符数，不同于原生 `maxLength`，超出后标红但不会截断
  max?: number;
  // 自定义字符计数，例如标准 emoji 长度大于 1，可以自定义计数策略将其改为 1
  strategy?: (value: string) => number;
  // 同 `showCount`
  show?: boolean | ((args: { value: string; count: number; maxLength?: number }) => ReactNode);
  // 当字符数超出 `count.max` 时的自定义裁剪逻辑，不配置时不进行裁剪
  exceedFormatter?: (value: string, config: { max: number }) => string;
}

Input.TextArea

同 Input 属性，外加：

Input.TextArea 的其他属性和浏览器自带的 textarea 一致。

Input.Search

其余属性和 Input 一致。

Input.Password

Input.OTP

5.16.0 新增。

开发者注意事项：

当 mask 属性的类型为 string 时，我们强烈推荐接收单个字符或单个 emoji，如果传入多个字符或多个 emoji，则会在控制台抛出警告。

VisibilityToggle

Input Methods

Semantic DOM

Input

语义说明来源: vendor/components/input/demo/_semantic_input.tsx

Input.TextArea

语义说明来源: vendor/components/input/demo/_semantic_textarea.tsx

Input.Search

语义说明来源: vendor/components/input/demo/_semantic_search.tsx

Input.Password

语义说明来源: vendor/components/input/demo/_semantic_password.tsx

Input.OTP

语义说明来源: vendor/components/input/demo/_semantic_otp.tsx

主题变量（Design Token）

类型、继承关系和原生令牌声明保持固定源码原文；默认值由原生主题计算，并可能受 ConfigProvider 覆盖。本表不伪造静态默认值。

原生 ComponentToken 未声明可直接提取的自有字段；共享令牌或继承关系以以下声明为准。

声明来源: 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

为什么我动态改变 prefix/suffix/showCount 时，Input 会失去焦点？

当 Input 动态添加或者删除 prefix/suffix/showCount 时，React 会重新创建 DOM 结构而新的 input 是没有焦点的。你可以预设一个空的 <span /> 来保持 DOM 结构不变：

const suffix = condition ? <Icon type="smile" /> : <span />;

<Input suffix={suffix} />;

为何 TextArea 受控时，value 可以超过 maxLength？

受控时，组件应该按照受控内容展示，这是为了防止在表单组件内使用时显示值和提交值不一致的问题。

原生通用属性

Tips: 以下通用属性适用于 antd 大部分组件，不支持的组件会单独说明。

安装并复现示例

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

使用 ConfigProvider 和原生 App，并单独配置 dayjs 语言。每个示例在查看代码中列出完整源码文件和额外固定依赖。示例名称用于选择演示，不是组件通用属性。主题、语言与 SSR 初始化见资源安装指南。

原生类型参考

源码查看器包含未修改的原生实现和以下声明文件，继承类型仍位于原生包中。代码中的英文注释保留为源码参考。

• 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

来源与许可

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

保留原生中英文正文与可执行示例；官网专用的嵌入章节和令牌表格在本地展开。Ant Design 使用 MIT 许可，另列依赖的许可证也需保留。上传预览禁止向外发起请求，不提供后端服务。