跳到正文

Input 输入框

Input 是文本输入框:单行的 input、password 密码框或多行的 textarea。外面是一个带边框的盒子,里面还可以放前缀、后缀、清除按钮、加载图标和字数统计。同尺寸的 Input 和 Button 可以排在同一行。

演示

基础用法

type="textarea" 是多行文本框。

尺寸

tiny、small、medium(默认)和 large,高度和按钮一致。

圆角

round 让单行输入框变成胶囊形。

前缀和后缀

prefix 和 suffix 可以放任意内容:图标、货币符号、单位。

密码

type="password" 配合 showPasswordOn 会加一个眼睛按钮:click 点击切换显示,mousedown 只在按住时显示。

可清除

clearable 加一个清除按钮,有值且悬停或聚焦时出现。点击后清空输入框、调用 onClear,焦点留在输入框里。

自适应高度

autosize 让文本框随内容变高:true 从一行开始,{ minRows, maxRows } 限定行数,超过 maxRows 后滚动。不用 autosize 时由 rows 决定高度(默认 3 行),可以纵向拖动调整。

字数统计

showCount 显示当前长度,设置了 maxLength 时一并显示上限。文本框的统计显示在文字下方。

校验状态

status 用边框颜色表示校验结果:success、warning 或 error。error 时请同时加上 aria-invalid,并用 aria-describedby 指向错误信息。

加载中

loading 在末尾显示加载图标。loading={false} 会预留图标的位置,开始加载时文字不会跳动。

禁用和只读

disabled 禁用输入框;readOnly 可以聚焦和选中文字,但不能编辑。两者都不显示清除按钮。

受控

传入 value 和 onUpdateValue 自己管理值。null 表示空。

原生属性和 ref

原生属性和事件(id、name、autoComplete、role、aria-*、onKeyDown 等)都传给原生的 input 或 textarea,ref 也指向它,可以直接调用 focus()、select()。inputProps 可以再传更多原生属性;其中的 type 会替换单行输入框的原生类型,比如 email 或 search。

输入框组

InputGroup 把 Input、Button 和 InputGroupLabel 拼成一行,相邻的边框合并。

无障碍

每个输入框都要有可见的 <label htmlFor> 或 aria-label;id 会传给原生元素。清除按钮不在 Tab 顺序里(键盘上全选再删除是一样的);密码切换按钮是带 aria-pressed 的开关按钮,showPasswordOn="click" 时可以用 Tab 到达。它们的名称取自 ConfigProvider 的语言包(Input.clear、Input.showPassword)。

Props

Input

名称类型默认值说明版本
typetext | password | textareatext输入框类型。未发布
valuestring | nullundefined受控时的值;null 表示空。未发布
defaultValuestring | nullnull非受控时的初始值。未发布
onUpdateValue(value: string) => voidundefined每次编辑和清除时传入新值。原生的 onChange、onInput 照常收到事件。未发布
sizetiny | small | medium | largemedium高度、字号和内边距,和按钮一致。未发布
placeholderstringundefined原生占位文字。未发布
disabledbooleanfalse禁用。未发布
readOnlybooleanfalse可以聚焦和选中,不能编辑。未发布
clearablebooleanfalse有值时显示清除按钮。未发布
onClear(event) => voidundefined清除按钮清空输入框后调用。未发布
statussuccess | warning | errorundefined校验状态,改变边框颜色。未发布
roundbooleanfalse胶囊形。textarea 忽略。未发布
prefixReactNodeundefined文字前面的内容。未发布
suffixReactNodeundefined文字后面的内容。未发布
loadingbooleanundefined在末尾显示加载图标;false 时预留位置。未发布
showPasswordOnclick | mousedownundefinedtype="password" 时加一个显示密码的开关。未发布
maxLengthnumberundefined原生最大长度,字数统计也会显示。未发布
showCountbooleanfalse显示长度,有 maxLength 时一并显示。未发布
rowsnumber3不用 autosize 时文本框的行数。未发布
autosizeboolean | { minRows?, maxRows? }false文本框在给定行数之间随内容变高。未发布
autoFocusbooleanfalse原生自动聚焦。未发布
inputPropsInputNativePropsundefined传给原生元素的更多属性。顶层同名属性优先;其中的 type 替换单行输入框的原生类型。未发布
refRef<HTMLInputElement | HTMLTextAreaElement>undefined原生的 input 或 textarea。未发布
wrapperRefRef<HTMLDivElement>undefined带边框的盒子,比如用来给弹层定位。未发布

className 和 style 作用在带边框的盒子上。其余原生属性和事件,包括 onFocus、onBlur、onKeyDown、role 和 aria-*,都传给原生的 input 或 textarea。要输入一对值,用两个 Input 即可。

InputGroup

InputGroup 支持原生 div 属性和 ref。一组相关的输入框需要名称时,加上 aria-label 或 role="group"。

InputGroupLabel

名称类型默认值说明版本
sizetiny | small | medium | largemedium和组里的 Input 保持一致。未发布

InputGroupLabel 同样支持原生 span 属性和 ref。