Tag Input
No native element for this — freeform text that commits into discrete tags. role="list" wraps role="listitem" chips plus a trailing listitem text input, deliberately lighter than a full listbox/grid: there's no selection or arrow-key navigation model here, just insertion and removal. Deliberately simpler than Combobox — no autocomplete or suggestion dropdown in this version.
ReactTypeScript
Press Enter or comma to add a tag. Backspace on an empty field removes the last one.
Playground
Toggle every adjustable prop and watch the component — and the code — update live.
ReactTypeScript
Press Enter or comma to add a skill.
max tags
allowDuplicates
invalid
hide label
label offset
Usage
<TagInput label="Skills" defaultValue={["React", "TypeScript"]} max={5} description="Press Enter or comma to add a skill." errorMessage="Add at least one skill." /><kernel-tag-input label="Skills" value="React,TypeScript" max="5" description="Press Enter or comma to add a skill." error-message="Add at least one skill."></kernel-tag-input>Props
| Prop | Type | Default |
|---|---|---|
label | ReactNode (required) | — |
hideLabel | boolean | false |
value | string[] | — |
defaultValue | string[] | [] |
delimiters | string[] | [","] |
max | number | — |
allowDuplicates | boolean | false |
onError | (error) => void | — |
description | ReactNode | — |
errorMessage | ReactNode | — |
invalid | boolean | false |
disabled | boolean | false |
Accessibility
- Each tag's remove button gets
aria-label="Remove {tag}"since it's an icon-only control. - Backspace on an empty draft removes the last tag and keeps focus in the text field — a real feature, not self-discoverable from ARIA alone, so it's called out here in prose too.
- Remove buttons are real
<button>elements but excluded from the Tab sequence (tabIndex={-1}) — an intentional tradeoff so a field with many tags doesn't add one Tab stop per tag; Backspace already covers the fully-keyboard-only removal flow, and mouse/touch users can still click a specific tag's remove button directly. - Pasting comma- or newline-separated text splits into multiple tags at once.