Tag Input

ReactFigma

Installation

npx asteria-ui add tag-input

Usage

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

const [tags, setTags] = useState(["React", "Figma"]);

<TagInput tags={tags} onTagsChange={setTags} aria-label="Tags" />

Examples

Sizes

React

Error

React

Disabled

ReactFigma

API reference

Prop	Type	Default	Description
tags	string[]	—	The current list of tags (controlled).
onTagsChange	(tags: string[]) => void	—	Called whenever a tag is added or removed.
size	"sm" \| "md" \| "lg"	"md"	Container height, matching the standard density scale.
placeholder	string	"Add tag..."	Placeholder for the text input.
error	boolean	false	Shows the error border color.
disabled	boolean	false	Disables adding, removing, and focusing.
preventDuplicates	boolean	true	Blocks adding a tag that already exists (case-insensitive).

Accessibility

Group. The container is role="group" — always pass an aria-label describing the field.
Remove buttons. Each tag's remove button has aria-label="Remove [tag name]".
Keyboard. Enter or comma creates a tag from the current text. Backspace on an empty input removes the last tag.
Disabled. The group gets aria-disabled, and both the text input and every remove button are natively disabled.
Focus ring. Visible on the container via shadow-glow-focus when the inner input has focus.

When to use

Use when users enter multiple values as discrete tags — email recipients, categories, search filters, skills. Each entry becomes a removable chip.

Do:

Allow Enter and comma to create tags
Show a clear remove button on every tag
Validate entries before creating a tag

Don't:

Allow duplicate tags
Set an invisible limit with no feedback
Make tags too small to read or tap

Badge — for display-only tags
Input — for single-value entry
Select — for predefined options

On this page