TagsInput

Free-form entry

Without data, the input accepts any text. Press Enter or , to commit a tag.

<TagsInput label="Keywords" placeholder="Add keyword…" />

With suggestions

Provide data to show a filtered suggestion dropdown while still allowing free-form input.

<TagsInput
  data={['React', 'Vue', 'Svelte', 'Davaux', /* … */]}
  label="Frameworks"
  placeholder="Add or search…"
/>

Constrained to list

Set constrained to restrict input to values that appear in data — free-form text that doesn't match is discarded.

<TagsInput data={frameworks} label="Frameworks" constrained />

Initial values

<TagsInput label="Tags" value={['typescript', 'css', 'davaux']} />

Max tags

Limit the number of tags with maxTags. The input hides once the limit is reached.

<TagsInput label="Up to 3 tags" maxTags={3} />

States

<TagsInput label="Tags" error="At least one tag is required." />
<TagsInput label="Tags" value={['read-only']} disabled />

Keyboard behaviour

• Enter or , — commits the current text as a tag
• ↑ / ↓ — navigates the suggestion dropdown (when data is provided)
• Backspace (empty input) — removes the last tag
• Escape — closes the suggestion dropdown
• Tab / click outside — commits any pending text (free-form mode) and closes dropdown