Tag Field

A tag field lets users add labels to items for categorization. They can type, select from a list, or create new tags as needed.

Basic

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

Installation

To install, run the following command:

Anatomy

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

import { TagField } from 'ui'
 
const selectedItems = useListData({
  initialItems: [
    {
      id: 1,
      name: "Laravel"
    },
    // ...
  ]
})
 
<TagField className="max-w-xs" label="Add tag" list={selectedItems} />

Max Entry

Set a limit on the number of tags that can be added.

Variant

By default, the tag field component uses the primary variant. But it has a secondary variant as well.

Shape

Customize the tag field’s shape using the shape prop.

Controlled

The tag field is controlled by default. This example demonstrates how to access its value.

Disabled

Disable the tag field by using the isDisabled prop.

Props

Here's the fixed table: