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:
If you hit any issues, make sure you check out the installation guide here.
Composed Components
This tag field integrates with components like:
When you plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.
The Tag Field's decked out with several components to make it bangin'.
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.
Intent
By default, the tag field component uses the primary intent. But it has a secondary intent 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:
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | - | The label of the tag field |
| description | string | - | The description of the tag field |
| placeholder | string | - | The placeholder of the tag field |
| max | number | - | The maximum number of tags that can be added |
| className | string | - | The class name of the tag field |
| name | string | - | The name of the tag field |
| list | ListData | - | 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 |
| isDisabled | boolean | - | The disabled state of the tag field |
| intent | string | 'primary' | 'primary', 'secondary' |
| shape | string | 'square' | 'square', 'circle' |