Tags Field

The tags field renders a tag/chip input for entering multiple string values.

Schema Properties

Prop

Type

UI Options

Option	Type	Default	Description
`delimiters`	`array`	`["enter"]`	Keys that create a new tag
`variant`	`"chips" \| "pills" \| "inline"`	`"chips"`	Visual variant for tag chips
`copyable`	`boolean`	`false`	Show a copy all button
`labels`	`object`	-	Text and label overrides
`labels.count`	`ReactNode`	`"{count} / {max} tags"`	Custom text for tag count
`className`	`string`	-	CSS class applied to the container
`width`	`string \| number`	-	Inline width applied to the field

React Overrides: The label, description, and ui.labels.count properties all support ReactNode (JSX) when importing defineSchema from @buildnbuzz/form-react.

Basic Usage

const schema = defineSchema({
  fields: [
    {
      type: "tags",
      name: "skills",
      label: "Skills",
      required: true,
      minTags: 3,
      maxTags: 10,
    },
  ],
});

Examples

With Max Tag Length

{
  type: "tags",
  name: "tags",
  label: "Tags",
  maxTagLength: 20,
  description: "Directly restricts input length per tag",
}

Allow Duplicates

{
  type: "tags",
  name: "emails",
  label: "Email Addresses",
  allowDuplicates: true,
}

Email Tags

{
  type: "tags",
  name: "recipients",
  label: "Recipients",
  minTags: 1,
  maxTags: 10,
  description: "Press Enter to add each email",
}

Auto-Derived Validators

Property	Validator
`required: true`	`required`
`minTags`	`minTags`
`maxTags`	`maxTags`

Select Field (multi-select mode)

Tags Field

On this page