How to build an accessible TagsInput in React
The typing surface is a real <input> and each tag exposes a dedicated remove button with an aria-label naming the tag, so screen-reader users can both add (Enter/comma) and delete (Backspace or the button) without ambiguity.
When to use a TagsInput
- 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 it
- Values come from a fixed, known list — use MultiSelect
- Only a single line of free text is needed — use Input
Keyboard interactions
Role textbox, verified at WCAG 2.2-AA.
Enter,Backspace
Common mistakes
Avoid: <TagsInput value={selectedRoles} ... /> // roles are a fixed enum
Prefer: <MultiSelect options={roleOptions} />
Free-text entry invites typos and inconsistent values when the set is actually constrained; pick from options instead
Example
<TagsInput value={['react', 'vue']} onValueChange={() => {}} placeholder="Add tag…" />