# InputTag

- Page: https://jiguang132.com/resources/arco-design/docs/input-tag
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

An input box which will display your input as tags.

## Install

```bash
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](popover#popover)>;} |`-`|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[]) =&gt; boolean \| Promise&lt;boolean&gt; \| T \| Promise&lt;T&gt; |`(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](#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](#objectvaluetype)[]) => ReactNode |`-`|index、values added in 2.15.0|

### ObjectValueType

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

### ValueChangeReason

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

---

Index of all JGuang resources: https://jiguang132.com/llms.txt