Tag Field

TagGroup
Loading...

Installation

Add the component with the CLI.

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.

fieldtag group

Manual installation

Install the dependencies, then copy the component source into your project.

For manual installation, use:

npm install react-aria-components @heroicons/react cn

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

TagField extends the React Aria Components <TextField> component.

classNamestring
defaultValuestring[]
Default: []
inputValuestring
isRequiredboolean
namestring
Default: tags
onChange(next: Selection) => void
onInputValueChange(v: string) => void
requiredMessagestring
splitPatternRegExp
Default: /[,;]/
valueSelection

See the React Aria for the full API reference.

Design
Search Field
Text Field