Tag Input

New

A field that turns text into chips that pop in and out. Enter or comma adds, Backspace removes, and suggestions can be picked with the arrow keys.

motionlucide-reactutils@soultel/use-reduced-motion-safe

Ticket topics

billing
enterprise

Enter or comma to add. Backspace twice removes the last one.2/6

Installation

$ pnpm dlx shadcn@latest add @soultel/tag-input

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/tag-input.json works too.

Manual installation

1. Install the dependencies.
terminal1 lines
```
npm install motion lucide-react
```
2. Copy the source from the Code tab into components/tag-input.tsx.

Usage

example.tsx12 lines

import { TagInput } from "@/components/tag-input"

export function ProjectTags() {
  return (
    <TagInput
      label="Tags"
      maxTags={5}
      defaultValue={["billing"]}
      suggestions={["onboarding", "bug", "feature request", "enterprise"]}
    />
  )
}

Props

Prop	Type	Default	Description
value / defaultValue	string[]	-	Controlled or initial tags.
onValueChange	(tags: string[]) => void	-	Called when tags change.
suggestions	string[]	-	Offered while typing, filtered and without tags already added.
maxTags	number	-	Upper limit. Shows a counter and shakes when exceeded.
validate	(tag, tags) => boolean \| string	-	Return false or a message to reject a tag.
preserveCase	boolean	false	Keep tags as typed instead of lowercasing.
label / hint / placeholder	string	-	Visible label, help text and placeholder.
name	string	-	Adds a hidden input with comma joined tags.