Input
输入框

通过鼠标或键盘输入内容,是最基础的表单域的包装。
使用import{ Input }from"antd";

何时使用

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

代码演示

基本使用。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

Input 形态变体。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.13.0
https://
Zhejiang

使用 Space.Compact 创建紧凑模式,更多请查看 Space.Compact 文档。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code




用于 onSearch 的时候展示 loading

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

autoSize 属性适用于 textarea 节点,并且只有高度会自动变化。另外 autoSize 可以设定为一个对象,指定最小行数和最大行数。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

结合 Tooltip 组件,实现一个数值输入框,方便内容超长时的全量展现。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

密码框。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
0 / 200 / 1000 / 100

展示字数提示。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

使用 status 为 Input 添加状态,可选 error 或者 warning

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code




我们为 <Input /> 输入框定义了三种尺寸(大、默认、小),高度分别为 40px32px24px

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
http://.com
http://
.com
http://.com
cascader

用于配置一些固定组合。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
https://

带有搜索按钮的输入框。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code


用于多行输入。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
With formatter (Upcase)
With Disabled
With Length (8)
With variant
With custom display character

一次性密码输入框。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.16.0


RMB

RMB

在输入框上添加前缀或后缀图标。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code


带移除图标的输入框,点击图标删除所有内容。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Exceed Max
12 / 10
Emoji count as length 1
3
Not exceed max
6 / 6

在某些场景下,需要定制计数能力(例如 emoji 长度以 1 计算),可以通过 count 属性来实现。在该模式下,通过 count.max 属性来超出原生 maxLength 的限制。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
>= 5.10.0

聚焦额外配置属性。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考:通用属性

Input

参数说明类型默认值版本
addonAfter带标签的 input,设置后置标签ReactNode-
addonBefore带标签的 input,设置前置标签ReactNode-
allowClear可以点击清除图标删除内容boolean | { clearIcon: ReactNode }-
bordered是否有边框, 请使用 variant 替换booleantrue4.5.0
classNames语义化结构 classRecord<SemanticDOM, string>-5.4.0
count字符计数配置CountConfig-5.10.0
defaultValue输入框默认内容string-
disabled是否禁用状态,默认为 falsebooleanfalse
id输入框的 idstring-
maxLength最大长度number-
prefix带有前缀图标的 inputReactNode-
showCount是否展示字数boolean | { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode }false4.18.0 info.value: 4.23.0
status设置校验状态'error' | 'warning'-4.19.0
styles语义化结构 styleRecord<SemanticDOM, CSSProperties>-5.4.0
size控件大小。注:标准表单内的输入框大小限制为 middlelarge | middle | small-
suffix带有后缀图标的 inputReactNode-
type声明 input 类型,同原生 input 标签的 type 属性,见:MDN(请直接使用 Input.TextArea 代替 type="textarea")stringtext
value输入框内容string-
variant形态变体outlined | borderless | filledoutlined5.13.0
onChange输入框内容变化时的回调function(e)-
onPressEnter按下回车的回调function(e)-
onClear按下清除按钮的回调() => void-5.20.0

如果 InputForm.Item 内,并且 Form.Item 设置了 id 属性,则 value defaultValueid 属性会被自动设置。

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 属性,外加:

参数说明类型默认值版本
autoSize自适应内容高度,可设置为 true | false 或对象:{ minRows: 2, maxRows: 6 }boolean | objectfalse
classNames语义化结构 classRecord<SemanticDOM, string>-5.4.0
styles语义化结构 styleRecord<SemanticDOM, CSSProperties>-5.4.0

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

Input.Search

参数说明类型默认值
enterButton是否有确认按钮,可设为按钮文字。该属性会与 addonAfter 冲突。ReactNodefalse
loading搜索 loadingbooleanfalse
onSearch点击搜索图标、清除图标,或按下回车键时的回调function(value, event, { source: "input" | "clear" })-

其余属性和 Input 一致。

Input.Password

参数说明类型默认值版本
iconRender自定义切换按钮(visible) => ReactNode(visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />)4.3.0
visibilityToggle是否显示切换按钮或者控制密码显隐boolean | VisibilityToggletrue

Input.OTP

5.16.0 新增。

开发者注意事项:

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

参数说明类型默认值版本
defaultValue默认值string-
disabled是否禁用booleanfalse
formatter格式化展示,留空字段会被 填充(value: string) => string-
mask自定义展示,和 formatter 的区别是不会修改原始值boolean | stringfalse5.17.0
length输入元素数量number6
status设置校验状态'error' | 'warning'-
size输入框大小small | middle | largemiddle
variant形态变体outlined | borderless | filledoutlined
value输入框内容string-
onChange当输入框内容全部填充时触发回调(value: string) => void-
onInput输入值变化时触发的回调(value: string[]) => void-5.22.0

VisibilityToggle

PropertyDescriptionTypeDefaultVersion
visible用于手动控制密码显隐booleanfalse4.24
onVisibleChange显隐密码的回调(visible) => void-4.24

Input Methods

名称说明参数版本
blur取消焦点-
focus获取焦点(option?: { preventScroll?: boolean, cursor?: 'start' | 'end' | 'all' })option - 4.10.0

Semantic DOM

Input

17
  • input
    5.4.0
    输入框元素
  • prefix
    5.4.0
    前缀的包裹元素
  • suffix
    5.4.0
    后缀的包裹元素
  • count
    5.4.0
    文字计数元素

Input.TextArea

17 / 100
  • textarea
    5.4.0
    输入框元素
  • count
    5.4.0
    文字计数元素

主题变量(Design Token)

组件 Token如何定制?

Token 名称描述类型默认值
activeBg输入框激活状态时背景颜色string#ffffff
activeBorderColor激活态边框色string#1677ff
activeShadow激活态阴影string0 0 0 2px rgba(5,145,255,0.1)
addonBg前/后置标签背景色stringrgba(0,0,0,0.02)
errorActiveShadow错误状态时激活态阴影string0 0 0 2px rgba(255,38,5,0.06)
hoverBg输入框hover状态时背景颜色string#ffffff
hoverBorderColor悬浮态边框色string#4096ff
inputFontSize字体大小number14
inputFontSizeLG大号字体大小number16
inputFontSizeSM小号字体大小number14
paddingBlock输入框纵向内边距number4
paddingBlockLG大号输入框纵向内边距number7
paddingBlockSM小号输入框纵向内边距number0
paddingInline输入框横向内边距number11
paddingInlineLG大号输入框横向内边距number11
paddingInlineSM小号输入框横向内边距number7
warningActiveShadow警告状态时激活态阴影string0 0 0 2px rgba(255,215,5,0.1)

全局 Token如何定制?

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

受控时,组件应该按照受控内容展示。以防止在表单组件内使用时显示值和提交值不同的问题。