Tags Input

Installation#

pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/tags-input

Anatomy#

TagsInput
└── TagsInputContext
    └── TagsInputItem

Usage#

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

<TagsInput defaultValue={["React", "Solid"]}>
  <TagsInputContext>
      {({ value }) =>
        value.map((value, index) => (
          <TagsInputItem index={index} key={value} value={value}>
            {value}
          </TagsInputItem>
        ))
      }
    </TagsInputContext>
</TagsInput>

Controlled#

Use value and onValueChange to control the tags array.

States#

Disabled#

Use the disabled prop to disable the tags input. Users cannot add, remove, or edit tags.

Invalid#

Use the invalid prop to mark the tags input as invalid for form validation.

Sizes#

Use the size prop on TagsInput to change the control and input height.

Small#

Medium#

Large#

Examples#

Blur Behavior#

Use blurBehavior="add" to add the current input value as a tag when the field loses focus.

Controlled Input Value#

Use inputValue and onInputValueChange to control the text field independently.

Delimiter#

Use delimiter with a regex to split tags when typing or pasting separators.

Disabled Editing#

Pass editable={false} to prevent editing existing tags after creation.

Max Tag Length#

Use maxLength to cap characters per tag.

Max With Overflow#

Use max with allowOverflow to allow exceeding the limit while marking the root as invalid.

Paste Behavior#

Use addOnPaste with delimiter to create multiple tags from pasted text.

Sanitize#

Use sanitizeValue to normalize tag text before tags are added.

Validation#

Use validate to accept or reject tags before they are added.

With Combobox#

With Field#

Wrap with Field for labels, descriptions, and validation messaging.

API Reference#

TagsInput#

Root component. Composes the control, input, and hidden field for form submission.

TagsInputInput#

Borderless text field for adding new tags. Rendered inside TagsInput by default.

TagsInputItem#

Represents a single tag. Requires index and value. Pass the label as children. Renders the delete trigger and edit input. Chip height follows the root size (sm, md, lg). Supports data-highlighted when navigated by keyboard.

TagsInputClearTrigger#

Clears all tags.

For the full list of props and context methods, see the Ark UI documentation.