Tag Input
Type tags into one field, with suggestions, paste and keyboard removal.
Tag Input collects several values in one field: skills, labels, recipients, keywords. Enter or a comma adds a tag, pasted comma lists split automatically, Tab accepts an inline suggestion, and Backspace on an empty field first highlights and then removes the last tag. Duplicates shake instead of being added twice.
Preview
Enter or comma to add · Tab accepts the suggestion · Backspace twice removes
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/tag-input.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/tag-input.
Builds on: motion
Usage
import { TagInput } from "@/components/ui/tag-input";
<TagInput defaultValue={["React"]} suggestions={["Tailwind CSS", "GSAP"]} />Motion
New tags pop in; duplicates give a short shake.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
TagInput
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | string[] | — | Controlled or initial tags. |
| onValueChange | (tags: string[]) => void | — | Called on change. |
| suggestions | string[] | — | Inline completions. |
| max | number | — | Maximum tags. |
Accessibility
- Every tag has a labelled remove button.
- Backspace arms before deleting, so a held key never wipes the list.
FAQ
Also searched as: react tag input · tags input shadcn · multi value input react · chip input react · react input with tags