Forms

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.

Laravel

Installation

To install, run the following command:

If you hit any issues, make sure you check out the installation guide here for more information.

Composed Components

This tag field integrates with components like:

Plug this component into the CLI, and it automatically loads all the included components. No need to add them individually.

The Tag Field comes packed with a variety of components to make it stand out.

Tag Group

This organizer keeps your tags tight and right, making sure they’re lined up and making sense, just like a librarian sorting books on a shelf.

Field

Field's a core piece every other component uses. It flexes reusable styles, showing up in inputs, labels, descriptions, and more.

Manual Installation

For manual installation, use:

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

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} />

Appearance

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

Max Entry

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

You can only add 3 tags

Intent

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

Laravel
Inertia.js
React
Tailwind CSS

Shape

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

Laravel
Inertia.js

Controlled

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

Ferrari
You can add multiple tags
[{"id":1,"name":"Ferrari"}]

Disabled

Disable the tag field by using the isDisabled prop.

Props

Here's the fixed table:

PropTypeDefaultDescription
labelstring-The label of the tag field
descriptionstring-The description of the tag field
placeholderstring-The placeholder of the tag field
maxnumber-The maximum number of tags that can be added
classNamestring-The class name of the tag field
namestring-The name of the tag field
listListData-The list of tags
onItemInserted(tag: TagItemProps) => void-The callback function when a tag is inserted
onItemCleared(tag: TagItemProps) => void-The callback function when a tag is cleared
isDisabledboolean-The disabled state of the tag field
intentstring'primary''primary', 'secondary'
shapestring'square''square', 'circle'
Radio Group