Tag Input

FREE

Type and press Enter to add tags; delimiters, paste, validation, suggestions and a max count.

Playground

Change the props and watch the component and its code update live.

react

1/5

Props

Placeholder

Max tags (0 = no limit)

Delimiters

Suggestions

Allow duplicates

Focus color

Code

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

<TagInput
  placeholder="Add a topic"
  maxTags={5}
  suggestions={["react", "nextjs", "tailwind"]}
/>

Installation

Terminal

npx @bloxa/cli add tag-input
# or: npx shadcn@latest add @bloxa/tag-input

Examples

With suggestions

Enter or comma adds a tag; Backspace on an empty field removes the last one.

reactnextjs

2/6

Validation

Invalid emails are rejected. Try pasting a comma-separated list.

API reference

Every component also accepts the props of the element it renders.

TagInput

Prop	Type	Default	Description
value / defaultValue	string[]	—	Tags.
onValueChange	(tags: string[]) => void	—	Called when tags change.
delimiters	string[]	[","]	Characters that commit a tag (Enter always does).
maxTags	number	—	Maximum number of tags.
validate	(tag) => string \| void	—	Return an error message to reject a tag.
suggestions	string[]	—	Suggestions shown while typing.
allowDuplicates	boolean	false	Allows repeated tags.