Default
Research
Prototyping
Show the codeHide the code
Default, code
<TagInput
label="Skills"
defaultValue={['Research', 'Prototyping']}
hint="Press Enter or a comma after each one."
/>TagInput
Type words and press Enter to turn them into removable tags; additions and removals are announced.
- Pro
- Version 2.0.0-rc.1
- APG pattern: Grid of tags plus a text input
Examples
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
Empty
Press Enter or a comma after each one.
Show the codeHide the code
Empty, code
<TagInput
label="Skills"
hint="Press Enter or a comma after each one."
defaultValue={[]}
placeholder="Add a skill"
/>Disabled
Research
Prototyping
Show the codeHide the code
Disabled, code
<TagInput
label="Skills"
defaultValue={['Research', 'Prototyping']}
hint="Press Enter or a comma after each one."
isDisabled
/>Tokens
The 18 design tokens TagInput reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 18 tokens
| Token | Value now | CSS variable |
|---|---|---|
| badge.neutral.bg | … | --sd-badge-neutral-bg |
| badge.neutral.fg | … | --sd-badge-neutral-fg |
| color.bg.muted | … | --sd-color-bg-muted |
| color.border.subtle | … | --sd-color-border-subtle |
| color.icon.strong | … | --sd-color-icon-strong |
| field.label | … | --sd-field-label |
| input.bg | … | --sd-input-bg |
| input.bg-disabled | … | --sd-input-bg-disabled |
| input.border | … | --sd-input-border |
| input.fg | … | --sd-input-fg |
| input.height | … | --sd-input-height |
| input.placeholder | … | --sd-input-placeholder |
| input.radius | … | --sd-input-radius |
| radius.full | … | --sd-radius-full |
| radius.sm | … | --sd-radius-sm |
| spacing.gap.xs | … | --sd-spacing-gap-xs |
| spacing.stack.xs | … | --sd-spacing-stack-xs |
| target.min | … | --sd-target-min |
Install
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/tag-inputThen import it
import { TagInput } from "@/components/ui/tag-input"Props
| Prop | Type | What it does |
|---|---|---|
labelrequired | string | Visible label (required). |
hint | string | |
value | string[] | |
defaultValue | string[] | |
onChange | (tags: string[]) => void | |
placeholder | string | |
maxTags | number | Maximum number of tags. |
isDisabled | boolean | |
className | string |
When to use it
Use it for
- Free-form keywords, skills, labels
- Email recipients when there is no directory
Use something else for
- Picking from a known list: use Combobox or CheckboxGroup
- One value: use TextField
Accessibility
Screen readers announce "Skills, grid" then "Research, row"; after Enter "Writing added.".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6.
Compact density meets AA (2.5.8, 24px targets), not AAA.
What your product still has to do
- Say how to add a tag in the hint
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 80 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 85 text runs: 0 below 7:1, lowest 8.43:1 |
| Target size | 42 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 60 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 7 of 7, Firefox 7 of 7, WebKit 7 of 7 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab enters the tag list on the first tag |
| ArrowRight | Right moves to the next tag |
| Tab | Tab moves to that tag's remove button |
| Tab | Tab moves to the text input |
| Type a new tag | |
| Enter | Enter adds it and clears the input |
| Backspace | Backspace in the empty input removes the last tag |
In Figma
The Figma component is TagInput, with State (Default, Focus, Disabled). The Figma library isn’t published yet.
Figma to code: State (Default, Focus, Disabled = isDisabled); Label → label; Placeholder → placeholder; Tags → defaultValue (string[]: the labels of the _TagInputTag copies in the slot); Hint → hint when Show hint.