Components
Tags Input
Display a list of tags in an input field with the ability to add, edit, and remove them.
Installation
Installation with shadcn/ui
CLI
Manual
Install the following dependencies:
Copy and paste the following code into your project.
Layout
Import the parts, and compose them together.
Examples
Editable
Kickflip
Heelflip
FS 540
With Validation
Validate the input value before adding it to the list. Can be used to prevent duplicate tags.
Add up to 6 tricks with at least 3 characters, excluding "ollie".
With Sortable
TagsInput
can be composed with Sortable
to allow reordering of tags.
The 900
FS 540
API Reference
Root
Container for the tags input.
Prop | Type | Default |
---|---|---|
defaultValue | string[] | - |
value | string[] | - |
onValueChange | (value: string[]) => void | - |
asChild | boolean | - |
onValidate | (value: string) => boolean | - |
displayValue | (value: string) => string | - |
addOnPaste | boolean | false |
addOnTab | boolean | false |
disabled | boolean | false |
editable | boolean | false |
loop | boolean | false |
blurBehavior | "add" | "clear" | - |
delimiter | string | "," |
max | number | Number.POSITIVE_INFINITY |
required | boolean | false |
readOnly | boolean | false |
name | string | - |
Data Attribute | Value |
---|---|
[data-disabled] | Present when disabled. |
[data-invalid] | Present when invalid. |
[data-readonly] | Present when readOnly. |
Label
Label element for the tags input.
Prop | Type | Default |
---|---|---|
asChild | boolean | - |
Data Attribute | Value |
---|---|
[data-disabled] | Present when the tags input is disabled. |
Input
Text input for adding new tags.
Prop | Type | Default |
---|---|---|
asChild | boolean | - |
Data Attribute | Value |
---|---|
[data-invalid] | Present when the input value is invalid. |
Item
Individual tag item.
Prop | Type | Default |
---|---|---|
asChild | boolean | - |
value | string | - |
disabled | boolean | - |
Data Attribute | Value |
---|---|
[data-state] | "active" | "inactive" |
[data-highlighted] | Present when the tag is highlighted. |
[data-disabled] | Present when the tag is disabled. |
[data-editing] | Present when the tag is being edited. |
[data-editable] | Present when the tags input is editable. |
ItemText
Text content of a tag.
Prop | Type | Default |
---|---|---|
asChild | boolean | - |
ItemDelete
Button to remove a tag.
Prop | Type | Default |
---|---|---|
asChild | boolean | - |
Data Attribute | Value |
---|---|
[data-disabled] | Present when the delete button is disabled. |
[data-state] | "active" | "inactive" |
Clear
Button to clear all tags.
Prop | Type | Default |
---|---|---|
asChild | boolean | - |
forceMount | boolean | false |
Data Attribute | Value |
---|---|
[data-disabled] | Present when the clear button is 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. |