Tag input
Turn short text values into removable tags.
pnpm dlx shadcn@latest add @uiarc/tag-inputLive · keyboard ready
- Free-form lists of short values like tags, keywords, or emails.
- Fields where people add values by pressing Enter or comma.
- Use multi-select or chip-group when values come from a fixed list.
- Use input for a single value.
Installation
Add Tag input with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/tag-inputAdds the component and its local dependencies, and installs motion, lucide-react. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { TagInput } from "@/registry/components/tag-input/tag-input"; export function TopicsField() { const [topics, setTopics] = useState(["design", "motion"]); return ( <TagInput label="Topics" value={topics} onValueChange={setTopics} description="Press Enter or comma to add." /> );}TagInput
A field that turns typed text into removable tags, with keyboard picking and a gliding selection ring.
PropTypeDefaultDescription
labelRequiredstring–Visible label tied to the text input.valuestring[]–Controlled tags.defaultValuestring[][]Initial tags when uncontrolled.onValueChange(value: string[]) => void–Called with the full list after each add or remove.placeholderstring"Add a tag"Shown while there are no tags.descriptionstring–Helper copy under the field.idstring–Input id. Generated when omitted.- Enteror,
- Adds the typed text as a tag. Duplicates (case-insensitive) pulse the existing tag instead.
- Backspace
- At the start of the input, picks the last tag; pressed again, removes the picked tag.
- Delete
- Removes the picked tag.
- ArrowLeftorArrowRight
- Moves the pick between tags and back to the input.
- Escape
- Clears the pick.
- Each tag has a remove button labelled "Remove <tag>".
- Adds, removals, picks, and duplicates are announced in a polite aria-live region.
- Blurring the input commits any typed draft as a tag.
- New tags blur and scale in where the text was typed; removed tags leave and the rest glide on the morph spring. The shell follows wrapped rows on a smooth spring.
- A ring glides between picked tags. Reduced motion removes layout travel, scale, and blur, keeping fades.
- Tags wrap onto new rows and the shell height follows on a spring, so the field never scrolls horizontally.
- The text input keeps an 80px minimum, dropping to its own row when the last row is full.
- Every tag is a motion element with layout position animation; fine for dozens of tags, not hundreds.
- Two ResizeObservers track the content and message heights.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for free-form values like tags, emails, or keywords. Use multi-select or chip-group when values come from a fixed list.
- Controlled or uncontrolled. Tags are plain strings; validate or normalize in onValueChange.
The full library index for assistants is at /llms.txt.