Input / 输入框

处理用户的输入数据。

输入框组件包含额外的 Hooks,详情请参阅 useInput 小节。

基础的

基础的输入字段。

大小

不同大小的输入框。

宽度

手动地设置宽度,或其他样式。

不可交互地

禁用输入框地所有交互效果。

行内标签

在输入框内显示短小地行内文本。

块级标签

为标签自定义更多样式。

状态

用色彩区分不同的状态。

图标

指定一个图标组件。

密码

显示或隐藏密码文本。

清除按钮

在输入框内增加一个用于清除文本的按钮。

变化事件

捕获输入框的文本变化。

命令式 API

使用非受控方式更新组件。

APIs / 接口文档

Input.Props

属性描述类型推荐值默认
value命令式设定输入框的值string--
initialValue初始值string--
placeholder占位文本string--
type输入框状态InputTypesInputTypesdefault
htmlType原生 HTML type 属性string-text
readOnly是否设置输入框为只读boolean-false
disabled是否禁用输入框boolean-false
clearable是否展示清除按钮boolean-false
label文本标签string--
icon输入框图标React.ReactNode--
labelRight居于右侧的文本标签string--
iconRight居于右侧的图标React.ReactNode--
iconClickable图标是否可点击boolean-false
onIconClick图标点击事件(e: React.ChangeEvent) => void--
onChange输入框变化事件(e: React.ChangeEvent) => void--
onClearClick清除按钮的点击事件(e: React.MouseEvent) => void--
ref转发的原生输入框 RefRef<HTMLInputElement | null>--
...原生属性InputHTMLAttributes'id', 'className', ...-

Input.Password.Props

属性描述类型推荐值默认
hideToggle隐藏切换密码的按钮boolean-false
...输入框组件属性Input.PropsInput.Props-

InputTypes

type InputTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'