# Tag input

Free tags and keywords (search terms, collections): chips inside a growing field, Enter or comma to add, × to remove.

- **Group:** Form controls · **family:** `form-controls` · **shadcn:** composed
- **Build:** Composed: `Badge` + `Input` (+ `Command` for suggestions).
- **In apps/admin today:** Not in apps/admin.
- **Client component:** yes. 

## Content rules

- Tags lower case unless proper nouns.

## Do

- Trim and de-duplicate.

## Don't

- Use for statuses.

## Accessibility

- **Keyboard:** Enter / comma adds; Backspace on an empty input selects then removes the last tag.
- **ARIA:** Each remove button `aria-label="Remove tag navy"`; list is `role="list"`.
- **Focus:** Focus stays in the input after add/remove.

## Tokens

`--control-h` `--s-2` `--r-chip` `--accent` `--accent-foreground` `--w-medium` `--text-small` `--font-ui` `--muted-foreground` `--motion-hover` `--primary` `--foreground`

## Files

`tag-input.html` live specimen · `tag-input.css` kit rules · `tag-input.d.ts` props · full page: `docs/components/tag-input/` (phone: `m/`).