Components / Tag input

Tag input

Free-text entry that commits tokens into dismissible pills: geo country codes, ad keywords — any list a user types rather than picks. Not for choosing among known options (use Select or SuggestionPills).

import { TagInput } from '@layers/ui/tag-input'

Rendered stock

House rules

• The component is deliberately dumb: the CONSUMER owns normalization, validation, and dedupe in onAdd, then reflects the accepted list back through tags. Never validate inside the component.
• An invalid entry stays VISIBLE as a destructive pill (invalid: true) — never silently drop what the user typed. Block submission while any invalid pill exists; the user removes or fixes it.
• detail carries a short muted qualifier on the pill (a keyword match type, an alias note) — one or two words, never a sentence.
• Enter, comma, blur, and comma/newline paste all commit tokens; Backspace on an empty field removes the last pill. Do not rebind these.
• Always pass aria-label — the inner input is otherwise unnamed.