Tag input

In FORMA

• Liegt in kit/arc/tag-input und ist über @/forma/arc/tag-input/tag-input erreichbar.
• Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

When to use

• Free-form lists of short values like tags, keywords, or emails.
• Fields where people add values by pressing Enter or comma.

When not to use

• Use multi-select or chip-group when values come from a fixed list.
• Use input for a single value.

Usage

import { TagInput } from "@/forma/arc/tag-input/tag-input";

export function TopicsField() {
  const [topics, setTopics] = useState(["design", "motion"]);
  return (
    <TagInput
      label="Topics"
      value={topics}
      onValueChange={setTopics}
      description="Press Enter or comma to add."
    />
  );
}

API reference

TagInput

A field that turns typed text into removable tags, with keyboard picking and a gliding selection ring.

Keyboard interactions

Accessibility

• Each tag has a remove button labelled "Remove <tag>".
• Adds, removals, picks, and duplicates are announced in a polite aria-live region.
• Blurring the input commits any typed draft as a tag.

Motion

• New tags blur and scale in where the text was typed; removed tags leave and the rest glide on the morph spring. The shell follows wrapped rows on a smooth spring.
• A ring glides between picked tags. Reduced motion removes layout travel, scale, and blur, keeping fades.

Responsive behavior

• Tags wrap onto new rows and the shell height follows on a spring, so the field never scrolls horizontally.
• The text input keeps an 80px minimum, dropping to its own row when the last row is full.

Performance

• Every tag is a motion element with layout position animation; fine for dozens of tags, not hundreds.
• Two ResizeObservers track the content and message heights.

Notes for AI

• Use for free-form values like tags, emails, or keywords. Use multi-select or chip-group when values come from a fixed list.
• Controlled or uncontrolled. Tags are plain strings; validate or normalize in onValueChange.

Related

• Multi-select: Select several values while keeping the field readable.
• Chip group: Filter by a few facets with chips that morph as you pick them.
• Input: A single line field with clear labels and useful states.

Also in special inputs

• Number field: Enter a bounded number with clear increment controls.
• Money input: A currency field with live grouping, stable width, rolling digits, and minor-unit output.
• Phone input: A phone field with a country picker, formatting as you type, and E.164 output.
• Scrub input: A Figma-style number field: drag the label to scrub, or type values, units, and arithmetic.
• Mention input: A textarea with @people and #channel mentions that act as single tokens, with suggestions at the caret.
• Shortcut recorder: Record key combinations into key caps, with conflict warnings, Kbd, and a searchable cheatsheet.

Guidance for AI tools

Tag input: Turn short text values into removable tags. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt