Tag Field

Installation

Install the component via the CLI in one command.

To install, run the following command:

npx shadcn@latest add @intentui/tag-field

Composed components

This tag field integrates with components like:

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

For manual installation, use:

npm install react-aria-components @heroicons/react tailwind-merge

Anatomy

Import the components and use them as shown below, adapting the structure to fit each component.

import { Label } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { TagField } from "@/components/ui/tag-field"

<TagField>
  <Label/>
  <Input/>
</TagField>

Component API

TagField

The TagField component lets users enter and remove tags.

See the React Aria for the full API reference.