Copy to clipboard
<TagsInput name="topics" defaultValue={["astro", "tailwind"]} placeholder="Add topic…" />
<TagsInput name="topics" defaultValue={["astro", "tailwind"]} placeholder="Add topic…" /><TagsInput name="topics" defaultValue={["astro", "tailwind"]} placeholder="Add topic…" />
Installation
Copy to clipboard
npx bearnie add tags-input
npx bearnie add tags-inputnpx bearnie add tags-input
bunx bearnie add tags-input
bunx bearnie add tags-inputbunx bearnie add tags-input
pnpm dlx bearnie add tags-input
pnpm dlx bearnie add tags-inputpnpm dlx bearnie add tags-input
yarn dlx bearnie add tags-input
yarn dlx bearnie add tags-inputyarn dlx bearnie add tags-input
Usage
import { TagsInput } from "@/components/bearnie/tags-input"<TagsInput name="tags" placeholder="Add tag…" />Type and press Enter (or comma) to add a tag, Backspace on an empty field removes the last one, and the X on each chip removes it. Duplicates are ignored (case-insensitive), and pending text is committed when the field loses focus. With a name, a hidden input submits the tags as a comma-separated string.
Examples
Maximum tags
max caps how many tags can be added — the field disables itself when the limit is reached.
Copy to clipboard
<TagsInput name="team" defaultValue={["ana", "marcus"]} max={3} placeholder="Add member…" />
<TagsInput name="team" defaultValue={["ana", "marcus"]} max={3} placeholder="Add member…" /><TagsInput name="team" defaultValue={["ana", "marcus"]} max={3} placeholder="Add member…" />
Disabled
Copy to clipboard
<TagsInput defaultValue={["read-only"]} disabled />
<TagsInput defaultValue={["read-only"]} disabled /><TagsInput defaultValue={["read-only"]} disabled />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | - | Form field name — a hidden input submits the tags comma-separated |
| defaultValue | string[] | [] | Initial tags |
| placeholder | string | “Add tag…” | Placeholder for the text field |
| max | number | - | Maximum number of tags |
| disabled | boolean | false | Disable the whole control |
| class | string | - | Additional CSS classes |
Events
Dispatches a bubbling tags-change CustomEvent whenever tags are added or removed: detail is { tags: string[] }.
Accessibility
- Each chip’s remove button has an
aria-labelnaming the tag it removes. - The text field is a regular input: Enter and comma add, Backspace removes the last tag when the field is empty.