Tag Input

Default

ReactTypeScriptCSS

ReactVue

ReactTypeScript

npx visor add tag-input

This copies two files into your project:

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

<TagInput placeholder="Add skills..." onChange={(tags) => console.log(tags)} />

Prop	Type	Default	Description
`value`	`string[]`	—	Controlled array of tag strings.
`defaultValue`	`string[]`	—	Default tags for uncontrolled usage.
`onChange`	`(tags: string[]) => void`	—	Callback when the tag list changes.
`placeholder`	`string`	`'Add tag...'`	Placeholder text when no tags are entered.
`max`	`number`	—	Maximum number of tags allowed.
`disabled`	`boolean`	`false`	Disables the tag input.

The input has role="combobox" with aria-expanded when suggestions are shown
Each tag chip has an associated remove button with aria-label="Remove [tag name]"
Keyboard: Enter or comma adds a tag; Backspace removes the last tag when input is empty; Delete removes a focused tag
Use an aria-label or associated <Label> to describe what kind of tags are expected (e.g., "Skills", "Topics")
When max is reached, the input is disabled and an aria-live region announces that the limit has been hit