TagInput

A field that turns typed text into removable tags on Enter or comma, with keyboard picking and removal.

When to use

• Free-form lists: tags, keywords, email recipients, allowed domains.
• When values are not known in advance. For picking from a fixed list use MultiSelect.

Usage

import { TagInput } from "@/components/iris/tag-input/tag-input";
function NoteTags() {
  const [tags, setTags] = React.useState(["focus", "reading"]);
  return h(TagInput, {
    label: "Tags",
    value: tags,
    onValueChange: setTags,
    description: "Press Enter or comma to add a tag.",
  });
}

Props

Prop	Type	Default	Description
label	string	required	Visible label tied to the text input.
value / defaultValue	string[]	– / []	Controlled or initial tags.
onValueChange	(value: string[]) => void	–	Called with the full list after an add or remove.
placeholder	string	"Add a tag"	Shown while there are no tags.
description	string	–	Helper copy under the field.
id	string	–	Input id; generated when omitted.

Notes

• Enter or comma adds; blur also commits the draft. Duplicates (case-insensitive) are ignored and the existing tag pulses.
• Backspace at the start picks the last tag, the next Backspace removes it; ArrowLeft/Right move the pick, Escape clears it. Each remove button is labelled "Remove ". Changes are announced in a polite live region.
• The shell grows with wrapped rows on a spring. The text input needs about 100px on the last row, otherwise it wraps to a new line.
• Reads --surface, --hover, --line, --line-strong, --accent, --accent-tint, --focus-ring, --radius-control, --radius-button.