TagInput

Free-text tagging with removable chips. Enter or comma adds a tag (trimmed, deduped case-insensitively, capped by max), Backspace on an empty box removes the last tag, and one hidden input per tag carries the form name for native submit.

Example

Skills

HTML
CSS

Press Enter or comma to add a tag.

<TagInput
  id="skills"
  label="Skills"
  name="skills"
  values={["HTML", "CSS"]}
  hint="Press Enter or comma to add a tag."
/>

Max tags

Topics

Vite

<TagInput
  id="topics"
  label="Topics"
  name="topics"
  values={["Vite"]}
  max={3}
  placeholder="Up to 3 topics"
/>

Error state

Labels

draft

Pick at least one published label.

<TagInput
  id="labels"
  label="Labels"
  name="labels"
  values={["draft"]}
  error="Pick at least one published label."
/>

Props

Prop	Type	Default	Description
`id`	`string`	-	Required. Input id; Field label targets it.
`label`	`string`	-	Visible label; also names the chip list.
`name`	`string`	`id`	Hidden-input form name; one input per tag.
`values`	`string[]`	`[]`	Initial tags, rendered as chips.
`placeholder`	`string`	`"Add a tag"`	Text-box placeholder.
`max`	`number`	-	Maximum tag count; extra adds are ignored.
`hint`	`string`	-	Help text below the input.
`error`	`string`	-	Error message; sets `aria-invalid`.
`required`	`boolean`	`false`	Marks the label required.
`disabled`	`boolean`	`false`	Non-interactive; disables box and chip buttons.
`class`	`string`	-	Style passthrough.

Accessibility

Text box is a plain textbox named by the Field label — no combobox role without a popup.
Chips live in a named list (<ul> labelled "{label} tags"); each remove button is named "Remove {tag}".
Hint and error connect via aria-describedby; error sets aria-invalid="true".
Adding and removing tags dispatches ink:tags:change with { values }.