shadcn.io is not affiliated with official shadcn/ui

Shadcn Tags Input for React Radix UI

Allows users to add tags to an input field.

Radix UI does not include this primitive, so this page uses the Ark UI component. The visuals match the Ark UI version.

PreviewCode

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/tags-input.json

Anatomy

TagsInputContext
├── TagsInputLabel
├── TagsInput
├── TagsInputInput
├── TagsInputClearTrigger
└── TagsInputItem
    ├── TagsInputItemPreview
    ├── TagsInputItemInput
    ├── TagsInputItemText
    └── TagsInputItemDeleteTrigger

Usage

import { Field, FieldLabel } from "@/components/ui/field";
import {
  TagsInput,
  TagsInputContext,
  TagsInputItem,
} from "@/components/ui/tags-input";

const defaultValue = ["React", "Solid", "Vue", "Svelte"];

const TagsInputDemo = () => (
  <Field className="w-full max-w-sm">
    <FieldLabel>Frameworks</FieldLabel>
    <TagsInput className="w-full" defaultValue={defaultValue}>
      <TagsInputContext>
        {({ value }) =>
          value.map((value, index) => (
            <TagsInputItem index={index} key={value} value={value}>
              {value}
            </TagsInputItem>
          ))
        }
      </TagsInputContext>
    </TagsInput>
  </Field>
);

Accessibility

Key	Description
`ArrowDown`	Move down.
`ArrowLeft`	Move left.
`ArrowRight`	Move right.
`Escape`	Dismiss.
`Backspace`	Delete backward.
`Delete`	Delete.
`Enter`	Activate the focused item.
`Space`	Activate the focused control.

Demos

Blur Behavior

PreviewCode

Combobox

PreviewCode

Controlled

PreviewCode

Controlled Input Value

PreviewCode

Custom Delimiter

PreviewCode

Disable Editing

PreviewCode

Disabled

PreviewCode

Field

PreviewCode

Invalid

PreviewCode

Max Length

PreviewCode

Max Tags

PreviewCode

Max With Overflow

PreviewCode

Paste Behavior

PreviewCode

Sanitize Value

PreviewCode

Size Lg

PreviewCode

Size Md

PreviewCode

Size Sm

PreviewCode

Validation

PreviewCode

API Reference

TagsInput

div

PropType

showClear?boolean

asChild?boolean

className?string

AttributeType

data-slot"tags-input"

data-scope"tags-input"

data-part"root"

data-disabled?string

data-empty?string

data-focus?string

data-invalid?string

data-readonly?string

data-size?string

TagsInputControl

div

PropType

showClear?boolean

asChild?boolean

className?string

AttributeType

data-slot"tags-input-control"

data-scope"tags-input"

data-part"control"

data-disabled?string

data-focus?string

data-invalid?string

data-readonly?string

TagsInputInput

input

PropType

showClear?boolean

asChild?boolean

className?string

AttributeType

data-slot"tags-input-input"

data-scope"tags-input"

data-part"input"

aria-invalidstring

data-empty?string

data-invalid?string

data-readonly?string

TagsInputClearTrigger

button

PropType

showClear?boolean

asChild?boolean

className?string

AttributeType

data-slot"tags-input-clear-trigger"

data-scope"tags-input"

data-part"clear-trigger"

aria-labelstring

data-readonly?string

type"button"

TagsInputItem

div

PropType

indexstring | number

valuestring

disabled?boolean

showClear?boolean

showDelete?boolean

asChild?boolean

className?string

AttributeType

data-slot"tags-input-item"

data-scope"tags-input"

data-part"item"

data-disabled?string

data-valuestring

TagsInputItemPreview

div

PropType

showClear?boolean

asChild?boolean

className?string

AttributeType

data-slot"tags-input-item-preview"

data-scope"tags-input"

data-part"item-preview"

data-disabled?string

data-highlighted?string

data-valuestring

TagsInputItemInput

input

PropType

showClear?boolean

asChild?boolean

className?string

AttributeType

data-slot"tags-input-item-input"

data-scope"tags-input"

data-part"item-input"

aria-labelstring

TagsInputItemText

span

PropType

showClear?boolean

asChild?boolean

className?string

AttributeType

data-slot"tags-input-item-text"

data-scope"tags-input"

data-part"item-text"

data-disabled?string

data-highlighted?string

TagsInputItemDeleteTrigger

button

PropType

showClear?boolean

asChild?boolean

className?string

AttributeType

data-slot"tags-input-item-delete-trigger"

data-scope"tags-input"

data-part"item-delete-trigger"

aria-disabledboolean

aria-labelstring

data-disabled?string

data-highlighted?string

type"button"

CSS variableType

--radiusstring

TagsInputRootProvider

div

PropType

valueUseTagsInputReturn

showClear?boolean

asChild?boolean

className?string

AttributeType

data-slot"tags-input-root-provider"

data-scope"tags-input"

data-part"root"

data-disabled?string

data-empty?string

data-focus?string

data-invalid?string

data-readonly?string

data-size?string

useTagsInput

PropType

showClear?boolean

TagsInputContext

PropType

addValue(value: string) → void

atMaxboolean

clearInputValueVoidFunction

clearValue(id?: string) → void

countnumber

emptyboolean

focusVoidFunction

getItemState(props: ItemProps) → ItemState

inputValuestring

setInputValue(value: string) → void

setValue(value: string[]) → void

setValueAtIndex(index: number, value: string) → void

valuestring[]

valueAsStringstring