Tagger

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

Current tags

Installation #

You can install this component via the shadcn CLI.

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

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

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

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.

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

Prop	Type	Description
`initialTags`	string[]	An array of strings to set the initial tags. Optional.

Used to wrap the list of tags.

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