Save 15% on all Justd Blocks
Components

Tag Field

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

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:

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

The Tag Field comes packed with several components to enhance functionality and provide a seamless experience.

A collection of tags displayed together, allowing users to categorize, filter, or manage multiple labels efficiently.
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:

Make sure you also install the composed components and the required packages for the component to function properly.

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'
Previous
Search Field
Next
Text Field