Tags Input
Collects removable free-form values with efficient keyboard entry and paste handling.
@rivetui/tags-inputPreview
Explore each composition interactively, then open its code in the same context.
Default
Capture compact free-form values without opening a separate selection surface.
Note
Press Enter or comma to add a tag. Paste comma-separated values, or press Backspace on an empty input to remove the last tag.
productioneu-central
Registry
Installation
Add the component source and its declared dependencies with the shadcn CLI.
Install component
bunx --bun shadcn@latest add @rivetui/tags-inputPublic interface
API reference
Component-specific props are listed here. Native element and Base UI props continue to pass through.
TagsInput
| Prop | Type | Default |
|---|---|---|
value | readonly string[] | — |
defaultValue | readonly string[] | [] |
onValueChange | (value: string[]) => void | — |
maxTags | number | Infinity |
validateTag | (tag: string) => boolean | — |
addOnBlur | boolean | true |
removeTagLabel | (tag: string) => string | `Remove ${tag}` |
name | string | — |
disabled | boolean | false |
aria-invalid | boolean | string | false |
className | string | — |
inputClassName | string | — |
TagsInputLabel
Accepts native label props. Connect it to TagsInput with matching htmlFor and id values.