Tag Input

React

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

const frameworks = [

Installation


pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/tag-input.json

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

<TagInput defaultValue={["React", "TypeScript"]} />

Control tags with value and onChange.

Next.jsTailwind

Tags: Next.js, Tailwind

"use client"

import * as React from "react"

Limit the number of tags with maxTags.

OneTwo

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

export function TagInputMax() {

ReactTypeScript

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

export function TagInputDisabled() {

Prop	Type	Default	Description
`value`	`string[]`	-	Controlled value
`defaultValue`	`string[]`	`[]`	Default value (uncontrolled)
`onChange`	`(value: string[]) => void`	-	Called when tags change
`suggestions`	`string[]`	`[]`	List of autocomplete suggestions
`placeholder`	`string`	`"Add tag..."`	Placeholder text
`disabled`	`boolean`	`false`	Disable the input
`maxTags`	`number`	-	Maximum number of tags
`allowDuplicates`	`boolean`	`false`	Allow duplicate tags
`allowCustom`	`boolean`	`true`	Allow custom tags not in suggestions
`delimiter`	`string \| RegExp`	`/[,\n]/`	Delimiter to split input

Key	Action
`Enter`	Add highlighted suggestion or input
`ArrowDown`	Highlight next suggestion
`ArrowUp`	Highlight previous suggestion
`Escape`	Close suggestions dropdown
`,`	Add current input as tag
`Backspace`	Remove last tag (when input empty)