Tags Input
Display a list of tags in an input field with the ability to add, edit, and remove them.
Installation
pnpm add @diceui/tags-inputInstallation with shadcn/ui
pnpm dlx shadcn@latest add @diceui/tags-inputLayout
Import the parts, and compose them together.
import {
TagsInput,
TagsInputLabel,
TagsInputItem,
TagsInputItemText,
TagsInputItemDelete,
TagsInputInput,
TagsInputClear,
} from "@diceui/tags-input";
return (
<TagsInput>
<TagsInputLabel/>
<TagsInputItem >
<TagsInputItemText />
<TagsInputItemDelete />
</TagsInputItem>
<TagsInputInput />
<TagsInputClear />
</TagsInput>
)Examples
Editable
With Validation
Validate the input value before adding it to the list. Can be used to prevent duplicate tags.
With Sortable
TagsInput can be composed with Sortable to allow reordering of tags.
API Reference
TagsInput
Container for the tags input.
| Data Attribute | Value |
|---|---|
[data-disabled] | Present when disabled. |
[data-invalid] | Present when invalid. |
[data-readonly] | Present when readOnly. |
TagsInputLabel
Label element for the tags input.
| Data Attribute | Value |
|---|---|
[data-disabled] | Present when disabled. |
TagsInputInput
Text input for adding new tags.
| Data Attribute | Value |
|---|---|
[data-invalid] | Present when invalid. |
TagsInputItem
Individual tag item.
| Data Attribute | Value |
|---|---|
[data-state] | "active" | "inactive" |
[data-highlighted] | Present when highlighted. |
[data-disabled] | Present when disabled. |
[data-editing] | Present when being edited. |
[data-editable] | Present when the tags input is editable. |
TagsInputItemText
Text content of a tag.
TagsInputItemDelete
Button to remove a tag.
| Data Attribute | Value |
|---|---|
[data-disabled] | Present when disabled. |
[data-state] | "active" | "inactive" |
TagsInputClear
Button to clear all tags.
| Data Attribute | Value |
|---|---|
[data-disabled] | Present when disabled. |
[data-state] | "visible" | "invisible" |
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
| Delete | When a tag is highlighted, removes it and sets focus to the next tag. |
| Backspace | When a tag is highlighted, removes it and sets focus to the previous tag. If there is no previous tag, focus moves to the next tag or input. |
| ArrowLeft | Highlights the previous tag. When cursor is at start of input, moves focus to the last tag. |
| ArrowRight | Highlights the next tag. When cursor is at start of input, moves focus to the first tag. |
| Home | Highlights the first tag in the list. |
| End | Highlights the last tag in the list. |
| Enter | When input has text, adds a new tag. When a tag is highlighted and editable is enabled, enters edit mode. |
| Escape | Clears tag highlight and edit mode, resets cursor to start. |
| Tab | When `addOnTab` is enabled and input has text, adds a new tag. Otherwise, blurs the input. |