Tags Input

Usage

import { TagsInput } from "@chakra-ui/react"

<TagsInput.Root>
  <TagsInput.Label />
  <TagsInput.Control>
    <TagsInput.Item>
      <TagsInput.ItemPreview>
        <TagsInput.ItemText />
        <TagsInput.ItemDeleteTrigger />
      </TagsInput.ItemPreview>
      <TagsInput.ItemInput />
    </TagsInput.Item>
    <TagsInput.Input />
  </TagsInput.Control>
</TagsInput.Root>

Shortcuts

The TagsInput component also provides a set of shortcuts for common use cases.

TagsInputItems

The TagsInputItems shortcut renders all tag items automatically based on the current value.

This works:

<TagsInput.Context>
  {({ value }) =>
    value.map((tag, index) => (
      <TagsInput.Item key={index} index={index} value={tag}>
        <TagsInput.ItemPreview>
          <TagsInput.ItemText>{tag}</TagsInput.ItemText>
          <TagsInput.ItemDeleteTrigger />
        </TagsInput.ItemPreview>
        <TagsInput.ItemInput />
      </TagsInput.Item>
    ))
  }
</TagsInput.Context>

This might be more concise, if you don't need to customize the items:

<TagsInput.Items />

Examples

Sizes

Use the size prop to adjust the size of the tags input.

Variants

Use the variant prop to change the visual style of the tags input.

Controlled

Use the value and onValueChange props to programmatically control the tags.

Store

An alternative way to control the tags input is to use the RootProvider component and the useTagsInput store hook.

This way you can access the tags input state and methods from outside the component.

Use RootProvider + useTagsInput or Root, not both.

Max Tags

Pass the max prop to the TagsInput.Root component to limit the number of tags that can be added.

Editable Tags

Use the editable prop to enable inline editing of existing tags by clicking on them, allowing users to quickly update tag values.

Validate Tag

Use the validate prop to implement custom validation rules. Tags will be added when the validation passes.

Disabled

Use the disabled prop to disable the tags input to prevent user interaction.

Readonly

Use the readOnly prop to make the tags input read-only. Tags input can be focused but can't be modified.

Invalid

Pass the invalid prop to the TagsInput.Root component to display the tags input in an invalid state with error messages.

Field

Here's an example that composes the TagsInput.Root with the Field component to add labels, helper text, and error messages.

Form

Here's an example that composes the TagsInput.Root with a form to collect structured data and handle submissions.

Paste

Pass the addOnPaste prop to the TagsInput.Root component to allow users to paste multiple values at once, automatically splitting them into individual tags based on a delimiter.

Blur Behavior

Use the blurBehavior prop to configure how the input behaves when it loses focus, such as automatically creating a tag from the current input value.

Custom Delimiter

Use the delimiter prop to use custom delimiters like commas, semicolons, or spaces to create new tags as users type.

Colors

Here's an example that assigns rather color scheme to the tags based on the tag value.

Combobox

Here's an example that composes the TagsInput component with the Combobox component to create a tags input that allows users to select from a list of predefined tags.

Props

Root

Item

Explorer

Explore the TagsInput component parts interactively. Click on parts in the sidebar to highlight them in the preview.