## Tag Field (S—068)

A tag input: Enter or comma adds a chip, Backspace arms then removes the last, with a count and suggestions.

- URL: https://sundaeui.dev/components/tag-field
- Category: Forms & inputs · Art direction: Understated
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/tag-field.json`
- Tags: form, keyboard, chips, multi, input, tags

Typed text becomes a chip on Enter or comma. Duplicates are ignored and a counter shows how close you are to the limit.
Backspace on an empty field first highlights the last chip, then removes it on the second press, so a stray key never deletes a tag. Suggestions sit underneath as one-tap chips.

### Usage

```tsx
import { TagField } from '@/components/sundae/tag-field'

<TagField label="Topics" defaultValue={['react']} suggestions={['css', 'a11y']} max={5} />
```

### Props

- `label` (`string`, required): Visible label for the input.
- `value / defaultValue` (`string[]`, default `[]`): Controlled or starting tags.
- `onValueChange` (`(tags: string[]) => void`): Called when a tag is added or removed.
- `suggestions` (`string[]`, default `[]`): Up to three unused ones are offered.
- `max` (`number`, default `6`): Tag limit; the input disables at the limit.
- `draft / onDraftChange` (`string`): Control the typed text if you need to.
- `chip` (`'pill' | 'square'`, default `'pill'`): Chip corner style.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Free-form labels: topics, skills, keywords, email recipients.
- Filters where people type values rather than pick from a fixed list.

### When not to use

- A fixed list of options: use a multi-select or checkboxes.
- One value: use a plain input.

### Accessibility

- A real labelled input; each chip has a "Remove tag" button.
- Additions and removals are announced in a polite live region.
- Reduced motion removes the chip pop-in.

### Keyboard

- Enter / ,: Add the typed tag
- Backspace ×2: Remove the last tag (first press highlights it)
- Tab: Reach each chip’s remove button and the suggestions

### FAQ

**Why does Backspace need two presses?**
The first press shows which chip will go. It stops people deleting a tag while they meant to fix a typo.

**Can I paste a list?**
Commas are treated as separators while typing; for pasted lists, split the clipboard text in onDraftChange and call your own add.