输入框 Input

基本表单组件，并在原生控件基础上进行了功能扩展，可以组合使用。

安装

npm install @arco-design/web-react@2.66.18

在入口引入 @arco-design/web-react/dist/css/arco.css，用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter，否则 Message、Modal 等命令式 API 无法渲染。

示例

基本用法：通过鼠标或键盘输入内容。
输入框状态：不同的输入框状态
四种尺寸：输入框定义了四种默认尺寸（mini,small, default, large），分别为 24px，28px，32px，36px。
前置、后置标签：指定addBefore和addAfter在输入框前后添加元素。
前后缀：通过指定prefix和suffix来在输入框内添加前缀和后缀。
搜索框：带有搜索按钮的输入框，用于内容检索。
搜索框 Loading：通过 loading 属性可以设置搜索框在 onSearch 的时候展示 loading。
输入框组合：通过鼠标或键盘输入内容。
字数统计：设置 maxLength 可以限制最大字数，配合 showWordLimit 可以显示字数统计。设置 maxLength.errorOnly 后不会限制用户输入字数，但是超过最大字数会展示错误状态。值得注意的是，如果配置了 showWordLimit，那么你将不能使用 suffix。
文本域：可以用于多行输入。
适应文本高度文本域：指定 autoSize，文本域会自动根据输入的文本调整文本域的高度。如果指定autoSize={{ minRows, maxRows }}，也能指定最小行数和最大行数。
密码输入：用于密码的输入。
格式化输入值：在指定时机对用户输入的值进行格式化处理，前后值不一致时，会触发 onChange
宽度自适应：通过 autoWidth 属性可以设置 Input 的宽度跟随文字自适应

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

API

Input

Input 接受所有原生的属性值

参数名	描述	类型	默认值	版本
allowClear	允许清空输入框	boolean	`-`	-
disabled	是否禁用	boolean	`-`	-
error	是否是错误状态.(废弃，下个大版本移除，使用 status='error' 替代)	boolean	`-`	-
readOnly	是否只读	boolean	`-`	-
showWordLimit	配合 `maxLength`，显示字数统计	boolean	`-`	-
defaultValue	默认值	string	`-`	-
placeholder	输入框提示文字	string	`-`	-
value	输入框的值，受控模式	string	`-`	-
autoWidth	设置宽度自适应。minWidth 默认为 0，maxWidth 默认为 100%	\| boolean\| { minWidth?: CSSProperties['minWidth']; maxWidth?: CSSProperties['maxWidth'] }	`-`	2.54.0
normalizeTrigger	指定 normalize 执行的时机	('onBlur' \| 'onPressEnter')[]	`['onBlur']`	2.50.0
size	输入框的尺寸	'mini' \| 'small' \| 'default' \| 'large'	`default`	-
status	状态	'error' \| 'warning'	`-`	2.45.0
addAfter	输入框后添加元素	ReactNode	`-`	-
addBefore	输入框前添加元素	ReactNode	`-`	-
clearIcon	`allowClear` 时配置清除按钮的图标。	ReactNode	`-`	2.50.0
prefix	添加前缀文字或者图标	ReactNode	`-`	-
suffix	添加后缀文字或者图标	ReactNode	`-`	-
afterStyle	输入框后添加元素的样式	object	`-`	-
beforeStyle	输入框前添加元素的样式	object	`-`	-
className	节点类名	string \| string[]	`-`	-
height	自定义输入框高度	number \| string	`-`	-
maxLength	输入框最大输入的长度；设置 `errorOnly`为 `true` 后，超过 `maxLength` 会展示 `error` 状态，并不限制用户输入。	number \| { length: number; errorOnly?: boolean }	`-`	`errorOnly` in 2.23.0
style	节点样式	CSSProperties	`-`	-
normalize	在指定时机对用户输入的值进行格式化处理。前后值不一致时，会触发 onChange	(value: string) => string	`-`	2.50.0
onChange	输入时的回调	(value: string, e) => void	`-`	-
onClear	点击清除按钮的回调	() => void	`-`	-
onPressEnter	按下回车键的回调	(e) => void	`-`	-

Input.TextArea

参数名	描述	类型	默认值	版本
allowClear	允许清空输入框	boolean	`-`	2.2.0
disabled	是否禁用	boolean	`-`	-
error	是否是错误状态。(废弃，下个大版本移除，使用 status='error' 替代)	boolean	`-`	-
defaultValue	默认值	string	`-`	-
placeholder	输入框提示文字	string	`-`	-
value	值	string	`-`	-
status	状态	'error' \| 'warning'	`-`	2.45.0
clearIcon	`allowClear` 时配置清除按钮的图标。	ReactNode	`-`	2.50.0
autoSize	是否自动调整输入框的高度	boolean \| { minRows?: number; maxRows?: number }	`-`	-
className	节点类名	string \| string[]	`-`	-
maxLength	输入框最大输入的长度；设置 `errorOnly`为 `true` 后，超过 `maxLength` 会展示 `error` 状态，并不限制用户输入。	number \| { length: number; errorOnly?: boolean }	`-`	`errorOnly` in 2.23.0
style	节点样式	CSSProperties	`-`	-
wrapperStyle	开启字数统计之后，会在 `textarea` 标签外包一层 `div`，`wrapperStyle` 用来配置这个 `div` 的样式。	CSSProperties	`-`	-
wordLimitPosition	字数统计的位置	`'inside' \| 'outside'`	`inside`	2.66.14
onChange	输入时的回调	(value: string, e) => void	`-`	-
onClear	点击清除按钮的回调	() => void	`-`	2.2.0
onPressEnter	按下回车键的回调	(e) => void	`-`	-

Input.Group

参数名	描述	类型	默认值
compact	是否使用紧凑模式	boolean	`-`
className	节点类名	string \| string[]	`-`
style	节点样式	CSSProperties	`-`

Input.Search

包含 Input 组件所有参数

参数名	描述	类型	默认值	版本
loading	搜索时展示加载状态	boolean	`-`	2.6.0
searchButton	搜索按钮	boolean \| ReactNode	`-`	`ReactNode` in 2.6.0
onSearch	点击搜索按钮的回调	(value: string) => void	`-`	-

Input.Password

包含 Input 组件所有参数

参数名	描述	类型	默认值
defaultVisibility	初始是否显示	boolean	`-`
visibility	是否显示	boolean	`-`
visibilityToggle	是否显示切换密码可见状态的按钮	boolean	`-`
onVisibilityChange	visibility 改变时触发	(visibility: boolean) => void	`-`

方法

参数名	描述	类型	默认值
focus	焦点事件	`Function`	`-`
blur	失去焦点事件	`Function`	`-`

示例

<Input ref={(ref) => (this.input = ref)} />;

this.input.focus();
this.input.blur();