TagsInput
Free-form multi-value chip input
Category: inputs · WCAG 2.2-AA · form, tags, chips, multi, input
States
- idle
- focused
- disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string[] | — | The controlled value. |
onValueChange | (v: string[]) => void | — | Called with the new value when it changes. |
placeholder | string | — | Placeholder text shown when the field is empty. |
validate | (tag: string) => boolean | — | Returns whether a candidate tag is allowed. |
max | number | — | Maximum allowed value. |
disabled | boolean | false | When true, disables the control and removes it from the tab order. |
Design tokens
--cascivo-color-surface--cascivo-color-border--cascivo-color-accent--cascivo-color-destructive--cascivo-color-bg-subtle--cascivo-radius-input--cascivo-radius-full--cascivo-focus-ring
When to use
- Collecting an open-ended set of free-text values the user types themselves (keywords, emails, labels)
- Each entry should appear as a removable chip and there is no fixed list to pick from
- You need per-tag validation or a cap on how many entries are allowed
When not to use
- Values come from a fixed, known list — use MultiSelect
- Only a single line of free text is needed — use Input
How to build an accessible TagsInput in React →
Examples
Basic
<TagsInput value={['react', 'vue']} onValueChange={() => {}} placeholder="Add tag…" />Related components
- MultiSelect — Use when values come from a fixed list rather than free text
- Input — Use for a single free-text value with no chips