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 github:itsvigneshv/default-file-ui#main df-ui add tag-input
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.