A tag field. Enter or comma adds a chip, Backspace removes the last one, and chips scale in and out. Supports a maximum count.
Topics you follow
Press Enter or comma to add one
npx shadcn@latest add https://hyperblur.dev/r/input-tags.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/input-tags.tsx.
import { InputTags } from "@/components/hyperblur/input-tags"
<InputTags defaultValue={["design", "motion"]} max={6} />| Prop | Type | Default | Description |
|---|---|---|---|
| value | string[] | Controlled tags. Pair with onValueChange. | |
| defaultValue | string[] | [] | Initial tags when uncontrolled. |
| onValueChange | (value: string[]) => void | Called with the new list after a tag is added or removed. | |
| max | number | Most tags allowed. Shows a counter and locks the field when reached. | |
| placeholder | string | "Add a tag" | Placeholder shown while there are no tags. |
| validate | (tag: string) => boolean | Return false to reject a tag. | |
| label | string | "Tags" | Accessible name of the group. |
| name | string | When set, a hidden input submits the tags as a comma separated string. | |
| disabled | boolean | false | Disable the field. |
| accent | string | "#2f7bff" | Focus and chip tint color. |