TagsInput
Freeform multi-value tag entry field with add-on-enter and individual remove controls.
Examples
With Pre-filled Tags
Tags input with initial values. Press Enter or comma to add more. Backspace removes the last tag.
Empty with Placeholder
Empty state with placeholder text.
With Remove Buttons
Tags with visible remove (×) buttons.
Max Count
Limits input to 3 tags maximum.
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { TagsInput } from "@rokle/components";import { TagsInput } from "@rokle/components";
export function Example() {
return <TagsInput />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string[] | - | Current list of tag values. |
| onValueChange | (tags: string[]) => void | - | Called when tags are added or removed. |
| placeholder | string | "Add tag…" | Input placeholder text. |