Chip field for a string[] value with suggestions, paste batching, and max tags.
Also known as: chips input, token input, multi value input
Install with the CLI, or copy the component source into your project.
Add tag-input (npm)
1npx --yes -p @default-file/ui df-ui add tag-input
Controlled string array. Add a tag with Enter or comma. Backspace on an empty draft removes the last chip.
Suggestion rows filter against the draft and hide tags that are already added. Focus the field to open the list.
Paste values separated by commas, semicolons, or spaces to commit several tags at once.
Paste values separated by commas, semicolons, or spaces to add several tags at once.
maxTags stops further commits once the limit is reached. Suggestions close at the limit.
Invalid chrome with a validation message under the field.
Disabled chips, input, and suggestions.
onReject reports duplicate and max failures. Duplicate also plays a short shake.
Chip field for a string[] value with optional suggestions, paste batching, max tags, and reject feedback.
| Prop | Type | Default | Notes |
|---|---|---|---|
| value | string[] | - | Controlled tags. |
| defaultValue | string[] | [] | Uncontrolled initial tags. |
| onValueChange | (value: string[]) => void | - | Called when the tag list changes. |
| suggestions | readonly string[] | [] | Suggestion list filtered against the draft and existing tags. |
| maxTags | number | - | Upper bound on committed tags. |
| invalid | boolean | false | Invalid styling and aria-invalid on the combobox. |
| validation | ReactNode | - | Message under the field. |
| disabled | boolean | false | Disables chips, input, and suggestions. |
| placeholder | string | - | Input placeholder when there are no tags. Defaults to the string catalogue. |
| id | string | - | Id on the text input. |
| aria-label | string | - | Applied on the root wrapper, not the combobox input. Prefer a visible Label with htmlFor pointing at id so the combobox itself is named. |
| itemChrome | ListItemChromeProps | - | Default List Item chrome for suggestion rows. |
| onReject | (tag: string, reason: "duplicate" | "max") => void | - | Called when a commit is rejected. Duplicate also plays a short shake. |
| className | string | - | Additional styles on the root. |
Combobox (role="combobox"): The draft input is a combobox with list autocomplete. Arrow keys move the active suggestion; Enter commits the active suggestion or the draft; Escape closes the list; Backspace on an empty draft removes the last chip. Chip remove (button): Each chip remove control uses a catalogue aria-label that includes the tag text. Accessible name (Label htmlFor): Wire a visible Label with htmlFor matching id. The aria-label prop names the root wrapper only, so Label plus id is the reliable way to name the combobox.