Tagger

A fully interactive, accessible, user interface component that allows users to input a list of tags.

Installation

You can install this component via the shadcn CLI.

npx shadcn@latest add https://jakeisonline.com/playground/registry/tagger.json

Usage

import { Tagger, TaggerInput, TaggerTags } from "@/components/ui/tagger"

<Tagger initialTags={["Hotel", "India"]}>
  <TaggerTags />
  <TaggerInput id="current-tags" />
</Tagger>

Accessibility

Sadly there is no WAI-ARIA design pattern for this component. Nonetheless, the following accessibility features are implemented:

• Individual tags are focusable, and can be removed using the backspace or delete key.
• The tags (<TaggerTags>) are a semantic unordered list (<ul>) with each tag being a list item (<li>).
• <TaggerInput> is a semantic text input (<input type="text">) is typed as such, and is focusable.

Component Reference

Tagger

Used to wrap a single tagger field. Also provides context for all child components.

TaggerTags

Used to wrap the list of tags.

TaggerInput

Used to wrap the input field. Native <input> element, allows for all native attributes.