Tag input

When to use #

Use it for

Topics, labels and keywords where people add their own values.
Short, free-form lists.

Skip it when

The values come from a fixed list; use a multi-select.
Order and structure matter; use a list editor.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/tag-input.json

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { useState } from "react"
import { TagInput } from "@/components/ui/tag-input"

export function TopicTags() {
  const [topics, setTopics] = useState(["Design", "Release"]);
  return (
    <div className="w-full max-w-sm">
      <TagInput label="Topics" value={topics} onValueChange={setTopics} />
    </div>
  );
}

API reference #

TagInput

component

PropTypeDefault

label *string—

valuereadonly string[]—

defaultValuereadonly string[][]

onValueChange((value: string[]) => void)—

placeholderstring"Add a tag"

descriptionstring"Press Enter or comma to add."

disabledboolean—

namestring—

idstring—

classNamestring—

It exposes status semantics, with aria-label, aria-hidden and aria-describedby kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour

EnterActivates the focused control.

BackspaceRemoves the previous character or item.

←Moves to the previous item or value.

→Moves to the next item or value.

EscapeCloses or cancels, then returns focus to where it came from.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.