Forms

Tag Field

An input component that allows users to enter, display, and manage multiple tags or keywords dynamically.

TagGroup
Search FieldText Field

Basic

The basic tag field lets you add tags to your content.

Loading...

Installation

To install, run the following command:

npx shadcn@latest add @intentui/tag-field

Composed components

This tag field integrates with components like:

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

This component comes packed with several components to enhance functionality and provide a seamless experience.

fieldtag group

Manual installation

For manual installation, use:

npm i react-aria-components

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>
Unlock the full power of
Design Intent UI
Build modern web apps faster with 500+ blocks and polished templates crafted for you.
Search Field
Text Field