输入框 Input

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

何时使用

• 需要用户输入表单域内容时
• 提供组合型输入框，比如带前后置内容的输入框
• 需要带清除功能的输入框时

示例

基础用法

最简单的用法，适用于大部分业务场景。

不同状态

展示输入框的不同状态：空状态、有内容、禁用等。

可清除输入框

带清除图标的输入框，点击图标清除内容。

密码输入框

用于输入密码，可切换明文/密文显示。

前置/后置内容

用于配置一些固定组合，如域名、货币单位等。

组合使用

将各种功能组合使用。

API

Input

参数	说明	类型	默认值
type	输入框类型	'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search'	'text'
clearable	是否显示清除按钮	boolean	false
onClear	清除时的回调	() => void	-
prepend	输入框前置内容（内部）	ReactNode	-
append	输入框后置内容（内部）	ReactNode	-
disabled	是否禁用	boolean	false
value	输入框内容（受控）	string	-
defaultValue	输入框默认内容	string	-
onChange	输入框内容变化时的回调	React.ChangeEventHandler<HTMLInputElement>	-
onFocus	输入框获得焦点时的回调	React.FocusEventHandler<HTMLInputElement>	-
onBlur	输入框失去焦点时的回调	React.FocusEventHandler<HTMLInputElement>	-
className	自定义类名	string	-