Tag input
Build a set of named tags with explicit add and remove actions, limits and form submission.
Reference collection
2 / 4
Press Enter or comma to add a tag, or choose Add.
This collection covers Accessibility, Motion.
Implementation
1"use client";2 3import {4 useEffect,5 useId,6 useRef,7 useState,8 type InputHTMLAttributes,9} from "react";10import { X } from "lucide-react";11 12export type TagInputProps = Omit<13 InputHTMLAttributes<HTMLInputElement>,14 "type" | "value" | "defaultValue" | "onChange" | "children"15> & {16 label: string;17 description?: string;18 value?: string[];19 defaultValue?: string[];20 maxTags?: number;21 onChange?: (tags: string[]) => void;22};23 24/** Explicit tag creation and removal, with a native text input and form values. */25export function TagInput({26 label,27 description = "Press Enter or comma to add a tag, or choose Add.",28 value,