InputTag InputTag

标签输入。

安装

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 无法渲染。

示例

前缀/前置标签/后置标签：前缀 / 前置标签 / 后置标签
不同尺寸：通过设置 size 来指定大小。
获取选项的文本：可以通过设置 labelInValue=true 获取选项的 label 值
校验与格式化输入：通过 validate 校验输入。此外，可以返回非布尔类型来将用户输入的字符串为特定的 value 格式。
失焦时保存：设置 saveOnBlur 在失焦时自动将正在输入的文本保存为标签。
自定义标签节点：指定 renderTag 来自定义标签节点。
拖拽排序：指定 dragToSort 属性以允许对已输入的值进行拖拽排序。
自动分词：设置 tokenSeparators 可以使用自动分词功能。尝试复制下方文本到输入框里。
最大标签数：通过 maxTagCount 设置最多展示的标签数，maxTagCount.render 自定义 +x 部分的节点内容。
响应式显示Tag：通过 maxTagCount=responsive 设置根据容器尺寸动态显示 Tag 数。会监听所有 Tag 及容器的尺寸变化，所以在标签数较多时不建议使用，可能存在性能问题。此时拖拽和动画效果不可用。

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

API

InputTag

参数名	描述	类型	默认值	版本
allowClear	是否允许清除	boolean	`-`	-
animation	是否为内部标签变化添加动画。	boolean	`true`	2.15.0
autoFocus	自动聚焦	boolean	`-`	-
disabled	是否禁用	boolean	`-`	-
dragToSort	是否可以通过拖拽为 Tag 排序	boolean	`-`	2.27.0
error	是否是错误状态.(废弃，下个大版本移除，使用 status='error' 替代)	boolean	`-`	-
labelInValue	设置传入和回调出的值均为 `{ label: '', value: ''}` 格式。	boolean	`-`	-
readOnly	是否只读	boolean	`-`	-
saveOnBlur	是否在失焦时自动存储正在输入的文本	boolean	`-`	2.25.0
inputValue	控件的输入框内的值	string	`-`	-
placeholder	预设文案	string	`-`	-
maxTagCount	最多显示多少个 `tag`	\| number\| 'responsive'\| {count: number \| 'responsive';render?: (invisibleTagCount: number, value: T[]) => ReactNode;popoverProps?: Partial<PopoverProps>;}	`-`	2.59.0. `responsive` in `2.62.0`
size	不同尺寸	'mini' \| 'small' \| 'default' \| 'large'	`-`	-
status	状态	'error' \| 'warning'	`-`	2.45.0
addAfter	输入框后添加元素	ReactNode	`-`	2.47.0
addBefore	输入框前添加元素	ReactNode	`-`	2.47.0
prefix	添加前缀文字或者图标	ReactNode	`-`	2.47.0
suffix	后缀	ReactNode	`-`	-
className	节点类名	string \| string[]	`-`	-
defaultValue	默认值	T[]	`-`	-
icon	自定义图标	{ removeIcon?: ReactNode; clearIcon?: ReactNode }	`-`	-
style	节点样式	CSSProperties	`-`	-
tokenSeparators	触发自动分词的分隔符	string[]	`-`	2.44.0
validate	校验函数，默认在按下enter时候触发。	(inputValue: string, values: T[]) => boolean \| Promise<boolean> \| T \| Promise<T>	`(inputValue, values) => inputValue && values.every((item) => item !== inputValue)`	return type T and `Promise<T>` in 2.37.0
value	控件值	T[]	`-`	-
onBlur	失去焦点时候触发	(e) => void	`-`	-
onChange	控件值改变时触发	(value: T[], reason: ValueChangeReason) => void	`-`	`reason` in 2.27.0
onClear	点击清除按钮的回调	() => void	`-`	2.20.0
onClick	单击组件的回调。	(e) => void	`-`	-
onFocus	聚焦时触发	(e) => void	`-`	-
onInputChange	输入框文本改变的回调。	(inputValue: string, event?) => void	`-`	-
onKeyDown	键盘事件回调	(e) => void	`-`	-
onPaste	输入框文本粘贴的回调。	(e) => void	`-`	-
onPressEnter	按 enter 键触发	(e) => void	`-`	-
onRemove	移除某一个标签时改变时触发	(value: T, index: number, event) => void	`-`	-
renderTag	自定义标签渲染，`props` 为当前标签属性，`index` 为当前标签的顺序，`values` 为所有标签的值.	(props: {value: any;label: ReactNode;closable: boolean;onClose: (event) => void;},index: number,values: ObjectValueType[]) => ReactNode	`-`	index、values added in 2.15.0

ObjectValueType

export type ObjectValueType = {
  value?: any;
  label?: ReactNode;
  closable?: boolean;
};

ValueChangeReason

export type ValueChangeReason = "add" | "remove" | "clear" | "sort";