Tag input

Enter, find and remove short values with a shared tag editor.

Preview

Knowledge labels

ProductResearch

Design guidance

Use Tag Input for editable values. Add suggestions when users can search existing values and create their own. Use Tag Group when all available options should stay visible. Enter, comma, Tab or leaving the field commits text. Pasted comma/newline values preserve accepted entries and retain the rejected suffix. Backspace in an empty input removes the last tag. Composition input remains uninterrupted. Give the input a visible associated label; disabled omits values from form submission and readOnly preserves them.

Installation

Install

npx shadcn@latest add https://ghost-ui.com/r/tag-input.json

Install fieldset or field as well when using the labelled example compositions.

Basic usage

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

<TagInput aria-label="Knowledge labels" name="labels" defaultValue={["Research"]} />

Structures

Examples

Suggestions and creation

Search known labels or create a new value. Combobox owns popup navigation.

Knowledge labels

Selection limit

Pass the existing Field.Description to description. The same helper shows the limit and turns red after a rejection. A rejected value stays available to correct after removing a tag.

Knowledge labels

ProductResearch

Choose up to 2 labels.

Validate new values

The caller supplies the rule and one description. Rejection changes the description's state without adding another visible message. Editing or accepting a corrected value clears the rejection state. Precise rejection feedback remains announced to assistive technology.

Workspace labels

Product

Up to 20 characters per label.

Controlled values and query

Control selected values and draft text independently.

Workspace labels

Product

Disabled

Editing and removal are disabled; values are not submitted.

Knowledge labels

ProductResearch

Read only

Keep values focusable and submitted while blocking edits.

Knowledge labels

ProductResearch

API reference

Prop	Type	Description
`value / defaultValue`	`string[]`	Controlled values or initial uncontrolled values. Exact case is preserved; blank and duplicate entries are ignored.
`onValueChange`	`(values: string[]) => void`	Receives a proposed change. Controlled state stays caller-owned.
`query / defaultQuery / onQueryChange`	`string / string / (query: string) => void`	Control or initialize the draft independently of selected values.
`suggestions`	`readonly string[] \| undefined`	Optional searchable suggestions. New text can still create a value.
`maxValues`	`number \| undefined`	Non-negative whole-number cap; 0 blocks additions. Invalid limits fail closed.
`validateValue`	`(value, acceptedValues) => boolean`	Validates each new tag against the already accepted values.
`description`	`ReactElement`	Existing helper element, such as Field.Description. Rendered once beside the editor, linked through aria-describedby, and given data-validation-state=invalid on rejection. Its text, explicit ID and ref are preserved. Editing, removal or acceptance clears the rejection state. Without it, rejection uses the default feedback paragraph.
`labels`	`TagInputLabels`	Override input, removal, invalid-value and limit announcements and default feedback text.
`variant`	`"default" \| "error"`	The error compatibility value marks the editor invalid.
`disabled / readOnly`	`boolean = false`	Disabled omits values; readOnly preserves submitted values and blocks edits.
`name / id / ref / native input props`	`native input attributes`	name submits one value per tag. ref targets the editable input. aria-describedby is preserved with feedback. Uncontrolled form reset restores defaults.