Form

Tags Input

Free-typed tags in a real text field. Enter or comma commits; Backspace takes the last one back.

Seed packet labels

BasilFern

Up to six — even the windowsill has limits.

Show code

"use client";

import { Label } from "@/registry/lilt/ui/label";
import { TagsInput } from "@/registry/lilt/ui/tags-input";

export default function TagsInputDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="plant-tags">Seed packet labels</Label>
      <TagsInput
        defaultValue={["Basil", "Fern"]}
        id="plant-tags"
        max={6}
        placeholder="Add a plant..."
      />
      <p className="text-xs text-[var(--lilt-text-muted)]">
        Up to six — even the windowsill has limits.
      </p>
    </div>
  );
}

Installation

npx shadcn@latest add @lilt/tags-input

Accessibility

The field stays a plain text input — Enter or comma commits, Backspace in an empty field takes the last tag back; changes are announced politely.
Every chip's remove button carries an aria-label naming its tag.