Tag Input

entryAs="slot" types the next tag into a dashed slot the shape of a held tag, instead of bare text after the last tag. The slot grows with what is typed. Its dashed edge is the shared drop edge, so edges: off turns it off with every other edge.

ReactTypeScript

Disabled

ReactTypeScript

Installation

npx visor add tag-input

This copies two files into your project:

components/ui/tag-input/tag-input.tsx — the component
components/ui/tag-input/tag-input.module.css — the styles

Usage

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

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

Theming

components.tag-input sets the field (min-height, padding, radius), each held tag (tag-height, tag-padding-x, tag-font-size, tag-font-weight, tag-radius) and the typing slot (slot-height, slot-padding-x, slot-radius, slot-min-width). Each slot key follows the matching tag key until set. Unset, everything renders as before. A 29px tag and slot with 9px corners, in a 40px field:

components:
  tag-input:
    min-height: "40px"
    padding: "5px"
    radius: "9px"
    tag-height: "29px"
    tag-padding-x: "10px"
    tag-font-weight: "300"
    tag-radius: "9px"

API Reference

TagInputProps

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.
`entryAs`	`'text' \| 'slot'`	`'text'`	Where the next tag is typed. `text` types after the last tag as bare text. `slot` types into a dashed slot the shape of a held tag, drawn on the shared drop edge, so `edges: off` turns it off.

Accessibility

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

Tag Input

Default

With Default Tags

With Max Limit

Typing Slot