Tag Input
The Tag Input component allows users to add, remove, and manage tags dynamically, with optional suggestions.
Usage
Default
Type a tag and press Enter or comma to add. Use arrow keys to navigate suggestions; Enter to select; Escape to close. Backspace removes the last tag when the field is empty.
- react
- nextjs
const [tags, setTags] = useState(["react", "nextjs"]);
<TagInput
tags={tags}
onChange={setTags}
placeholder="Add a tag..."
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tags | string[] | - | Array of strings representing the current tags. |
| onChange | (tags: string[]) => void | - | Callback fired when tags are added or removed. Receives the updated tag array. |
| fetchSuggestions | (input: string) => Promise<string[]> | - | Async function for fetching tag suggestions based on input text. Returns a list of tag strings. |
| debounceMs | number | 300 | Debounce time in milliseconds before triggering fetchSuggestions. |
| placeholder | string | "Add a tag..." | Placeholder text displayed in the tag input field. |
| theme | "primary" | "secondary" | "tertiary" | "quaternary" | "clear" | Configured Default | Theme color variant for the tag input. |
| state | "success" | "error" | "warning" | - | State color for validation or feedback styling. |
| size | "xs" | "small" | "medium" | "large" | "xl" | Configured Default | Size of the tag input and its tags. |
| rounding | "none" | "small" | "medium" | "large" | Configured Default | Border radius for tags and the input container. |
| shadow | "none" | "light" | "medium" | "strong" | "intense" | Configured Default | Shadow style applied to the container. |
| ariaDescription | string | "Type a tag and press Enter or comma to add. Existing tags can be removed using the remove button next to each tag." | ARIA description for assistive technologies. |
| data-testid | string | "tag-input" | Test ID for the root element (for testing utilities). |