Sections

Components

Utilities

Forms

Hooks

useIsMobile

Tags Input

Copy Markdown

Allows users to add tags to an input field.

Docs API

PreviewCode

Frameworks

React

Solid

Vue

Svelte

Installation#

CLIManual

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.

PreviewCode

Frameworks

React

Solid

States#

Disabled#

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

PreviewCode

Frameworks

React

Solid

Vue

Invalid#

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

PreviewCode

Frameworks

React

Sizes#

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

Examples#

Blur Behavior#

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

PreviewCode

Frameworks

React

Controlled Input Value#

Use inputValue and onInputValueChange to control the text field independently.

PreviewCode

Set "React"Clear

Frameworks

React

Delimiter#

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

PreviewCode

Frameworks

React

Disabled Editing#

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

PreviewCode

Frameworks

React

Solid

Max Tag Length#

Use maxLength to cap characters per tag.

PreviewCode

Frameworks (max 10 chars)

React

Max With Overflow#

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

PreviewCode

Frameworks

React

Solid

Vue

Paste Behavior#

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

PreviewCode

Frameworks

Sanitize#

Use sanitizeValue to normalize tag text before tags are added.

PreviewCode

Frameworks

react

Validation#

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

PreviewCode

Min 3 chars, alphanumeric + hyphen

With Field#

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

PreviewCode

Frameworks

React

Solid

Press Enter to add a tag.

API Reference#

TagsInput#

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

Prop	Type	Default
`size`	`"sm"	"md"
`showClear`	`boolean`	`true`
`defaultValue`	`string[]`	-
`value`	`string[]`	-
`inputValue`	`string`	-
`defaultInputValue`	`string`	-
`max`	`number`	`Infinity`
`maxLength`	`number`	-
`delimiter`	`string	RegExp`
`allowDuplicates`	`boolean`	`false`
`allowOverflow`	`boolean`	-
`disabled`	`boolean`	-
`invalid`	`boolean`	-
`required`	`boolean`	-
`editable`	`boolean`	`false`
`addOnPaste`	`boolean`	`false`
`blurBehavior`	`"add"	"clear"`
`validate`	`(details) => boolean`	-
`sanitizeValue`	`(value: string) => string`	`(value) => value.trim()`
`onValueChange`	`(details) => void`	-
`onInputValueChange`	`(details) => void`	-
`onHighlightChange`	`(details) => void`	-
`onValueInvalid`	`(details) => void`	-
`className`	`string`	-

TagsInputInput#

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

Prop	Type	Default
`placeholder`	`string`	-
`className`	`string`	-

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.

Prop	Type	Default
`index`	`number`	required
`value`	`string`	required
`showDelete`	`boolean`	`true`
`disabled`	`boolean`	-
`className`	`string`	-

TagsInputClearTrigger#

Clears all tags.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

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

[

Tabs ](/docs/components/tabs)[

Textarea ](/docs/components/textarea)

On This Page

Installation Anatomy Usage Controlled States Disabled Invalid Sizes Small Medium Large Examples Blur Behavior Controlled Input Value Delimiter Disabled Editing Max Tag Length Max With Overflow Paste Behavior Sanitize Validation With Combobox With Field API Reference TagsInput TagsInputInput TagsInputItem TagsInputClearTrigger

Tags Input

Tags Input

Installation#

Anatomy#

Usage#

Controlled#

States#

Disabled#

Invalid#

Sizes#

Small#

Medium#

Large#

Examples#

Blur Behavior#

Controlled Input Value#

Delimiter#

Disabled Editing#

Max Tag Length#

Max With Overflow#

Paste Behavior#

Sanitize#

Validation#

With Combobox#

With Field#

API Reference#

TagsInput#

TagsInputInput#

TagsInputItem#

TagsInputClearTrigger#