Delta Components

Docs

Tags Input

A flexible tag input component with multiple trigger keys, variants, and Zod validation support.

15 views

2 downloads

Based onStripe Checkout

Demo

Code

Open in

Overview

The Tags Input component enables efficient collection and management of multiple text values with an intuitive tagging interface, essential for categorization, keyword entry, and multi-value form fields. It supports various trigger keys (Enter, Space, Comma), configurable limits, and both default and pill variants with comprehensive validation. Perfect for skill tags, categories, search filters, and any scenario requiring organized multi-value input with excellent user experience.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/tags-input.json

Usage

1"use client"
2
3import { TagsInput } from "@/registry/inputs/tags-input"
4
5export function Component() {
6  return (
7    <TagsInput
8      label="Skills"
9      name="skills"
10      description="Add your technical skills"
11      triggerKey="Enter"
12      maxTags={10}
13      onChange={(tags) => console.log("Tags:", tags)}
14    />
15  )
16}

API Reference

Props

Prop	Type	Default	Description
`label`	`string`	-	Label text for the input (required)
`name`	`string`	-	Form field name for submission (required)
`description`	`string`	`undefined`	Description text below the label
`hint`	`string`	`undefined`	Hint text below the input
`error`	`string`	`undefined`	Error message to display
`required`	`boolean`	`false`	Whether the field is required
`pending`	`boolean`	`false`	Whether the field is in a loading state
`defaultValue`	`string[]`	`[]`	Default tags array (uncontrolled)
`value`	`string[]`	`undefined`	Controlled tags array
`disabled`	`boolean`	`false`	Whether the input is disabled
`id`	`string`	`name`	ID for the input element
`variant`	`"default" \| "pill"`	`"default"`	Input styling variant
`coloredBorder`	`boolean`	`false`	Show colored border (pill variant only)
`labelVariant`	`"default" \| "muted"`	`"default"`	Label text styling variant
`containerClassName`	`string`	`""`	CSS classes for the container
`labelClassName`	`string`	`""`	CSS classes for the label
`triggerKey`	`"Enter" \| "Space" \| "Comma"`	`"Enter"`	Key that triggers tag addition
`maxTags`	`number`	`undefined`	Maximum number of tags allowed
`schema`	`ZodType<string[]>`	`undefined`	Zod schema for validation
`onValidate`	`(isValid: boolean, value: string[], error?: string) => void`	`undefined`	Validation callback
`onChange`	`(tags: string[]) => void`	`undefined`	Callback when tags change