InputTag

An input box which will display your input as tags.

Install

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

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

Prefix/addBefore/addAfter: Prefix / addBefore / addAfter
Different sizes: Use size to specify the size of InputTag
LabelInValue: Use labelInValue=true to get label of the selected option
Validate/format input: Use validate to enable custom validator for input value. Additionally, non-boolean can be returned to format user-entered strings in a specific value format.
Save on blur: Set saveOnBlur to automatically save the text being entered as a label when it loses focus.
Render tag: Use renderTag to customize tag rendering
Draggable: Specify the dragToSort property to allow sort the entered values by dragging.
Token Separator: Set tokenSeparators to use automatic word segmentation. Try copying text below into the input box.
MaxTagCount: Set the maximum number of displayed tags through maxTagCount, and customize the +x partially rendered nodes through maxTagCount.render.
Responsive Tags: Use maxTagCount=responsive to dynamically display the number of Tags based on the container size. It will monitor the size changes of all Tags and containers, so it is not recommended to use it when there are a large number of tags, as there may be performance issues. Drag and animation effects are not available at this time.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

InputTag

Property	Description	Type	DefaultValue	Version
allowClear	Whether to allow clear input value	boolean	`-`	-
animation	Whether to add animation for internal label changes	boolean	`true`	2.15.0
autoFocus	Whether the input is focused by default	boolean	`-`	-
disabled	Whether the input is disabled	boolean	`-`	-
dragToSort	Weather it is possible to sort tags by drag	boolean	`-`	2.27.0
error	Whether the input is error.(Deprecated, removed in the next major version, use status='error' instead)	boolean	`-`	-
labelInValue	If true, the incoming and callback values will be `{label: '', value: '')` format	boolean	`-`	-
readOnly	Whether the input is read only	boolean	`-`	-
saveOnBlur	Whether to automatically store the text entering when blur InputTag	boolean	`-`	2.25.0
inputValue	To set input value	string	`-`	-
placeholder	Placeholder of input element	string	`-`	-
maxTagCount	The maximum number of `tags` is displayed	\| number\| 'responsive'\| {count: number \| 'responsive';render?: (invisibleTagCount: number, value: T[]) => ReactNode;popoverProps?: Partial<PopoverProps>;}	`-`	2.59.0. `responsive` in `2.62.0`
size	Different sizes	'mini' \| 'small' \| 'default' \| 'large'	`-`	-
status	Status	'error' \| 'warning'	`-`	2.45.0
addAfter	The label text displayed after (on the right side of) the input-tag field	ReactNode	`-`	2.47.0
addBefore	The label text displayed before (on the left side of) the input-tag field	ReactNode	`-`	2.47.0
prefix	The prefix icon or text for the input-tag	ReactNode	`-`	2.47.0
suffix	The suffix for the InputTag	ReactNode	`-`	-
className	Additional css class	string \| string[]	`-`	-
defaultValue	To set default value	T[]	`-`	-
icon	Custom icons	{ removeIcon?: ReactNode; clearIcon?: ReactNode }	`-`	-
style	Additional style	CSSProperties	`-`	-
tokenSeparators	Separator used to tokenize	string[]	`-`	2.44.0
validate	Function to check user's input, which is triggered when `Enter` is pressed	(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	To set value	T[]	`-`	-
onBlur	Callback when input is blurred	(e) => void	`-`	-
onChange	Callback when value changes	(value: T[], reason: ValueChangeReason) => void	`-`	`reason` in 2.27.0
onClear	Callback when clear button is clicked	() => void	`-`	2.20.0
onClick	Callback when the component is clicked	(e) => void	`-`	-
onFocus	Callback when input is focused	(e) => void	`-`	-
onInputChange	Callback when the value of input changes	(inputValue: string, event?) => void	`-`	-
onKeyDown	Callback when the keyboard is pressed	(e) => void	`-`	-
onPaste	Callback when you paste text in input box	(e) => void	`-`	-
onPressEnter	Callback when `Enter` key is pressed	(e) => void	`-`	-
onRemove	Callback when a tag is removed	(value: T, index: number, event) => void	`-`	-
renderTag	Custom tag rendering, `props` is the current tag attribute, `index` is the order of the current tag, `values` is the value of all tags	(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";