Tag Input

A controlled tag input that lets users add and remove tags by typing. Supports Enter, comma, and Backspace keys.

Preview

reacttypescripttailwind

Installation

npx shadcn@latest add @shadszn/tag-input

Usage

"use client"

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

export default function Example() {
  const [tags, setTags] = useState(["react", "typescript"])

  return (
    <TagInput
      value={tags}
      onChange={setTags}
      placeholder="Add a tag..."
      maxTags={5}
    />
  )
}

Keyboard Interactions

Enter or , -- Adds the current input as a tag
Backspace -- Removes the last tag when input is empty
Blur -- Adds the current input as a tag on focus loss

Props

Prop	Type	Default	Description
value*	string[]	---	Array of current tag strings.
onChange*	(tags: string[]) => void	---	Callback when tags change.
placeholder	string	"Add tag..."	Placeholder text when no tags exist.
maxTags	number	10	Maximum number of tags allowed.
className	string	---	Additional CSS classes for the container.