TagsInput

Free-form multi-value chip input

Category: inputs · WCAG 2.2-AA · form, tags, chips, multi, input

States

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.
`id`	`string`	—	Id for the inner text input — the focusable control, so a `<label for>` names the thing that actually takes focus. `Field` supplies this automatically.
`ariaLabel`	`string`	—	Invisible accessible name for the tag entry field. Use when no visible label names it; inside a `Field` it is not needed, as the Field label is wired through automatically.
`label`	`string`	—	Alias of `ariaLabel` — the same invisible accessible name under the other spelling. Not rendered.

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

<TagsInput value={['react', 'vue']} onValueChange={() => {}} placeholder="Add tag…" />