Forms
Tags input
Free-form list entry: type a value, press Enter, get a chip. Use it when the set of possible values is open-ended.
Not documented yet
This component ships in the design system and is fully supported. What is missing is the guidance around it: when to reach for it, the do and don't, and the accessibility notes. Until that is written, Storybook is the reference for variants, props and live controls.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string[] | undefined | — | Controlled list of tags. |
defaultValue | string[] | undefined | — | Uncontrolled initial tags. |
onValueChange | ((tags: string[]) => void) | undefined | — | — |
validate | ((tag: string, current: string[]) => string | null) | undefined | — | Reject a candidate tag by returning an error message (null accepts). |
placeholder | string | undefined | — | — |
disabled | boolean | undefined | — | — |
maxTags | number | undefined | — | Maximum number of tags; input hides when reached. |
inputLabel | string | undefined | "Add a tag" | Accessible name for the text field. A placeholder is not a label — it disappears on first keystroke and is ignored by some screen readers. Pass `inputId` and your own `<Label htmlFor>` instead when the field has a visible label; this is the fallback for when it does not. |
inputId | string | undefined | — | `id` for the inner text field, so a visible `<Label htmlFor>` can target it. |