ComponentClient component

Tag Input

A token field for creating, validating and removing free-form values with the keyboard.

Installation

Preview

Technology stack

ReactTypeScriptTailwind CSS

Press Enter or comma to create a tag. Backspace removes the last one.

Usage

tsx

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

<TagInput
  defaultValue={["React", "TypeScript"]}
  maxTags={5}
  name="technologies"
  placeholder="Add technology..."
/>

API reference

Prop	Type	Default	Description
`value`	`string[]`	`—`	Controlled collection of tags.
`onValueChange`	`(value: string[]) => void`	`—`	Runs whenever a tag is added or removed.
`maxTags`	`number`	`—`	Maximum number of accepted tags.
`validateTag`	`(value: string) => boolean`	`—`	Validates a candidate before it is added.
`delimiters`	`string[]`	`[","]`	Keys and pasted separators that create a tag.
`className`	`string`	`—`	Overrides or extends the generated Tailwind classes.
`disabled`	`boolean`	`false`	Prevents user interaction when supported.