ChipGroup

A set of filter chips that check and morph as they are picked, with single or multiple selection and a "+N more" fold.

When to use

• Filtering a list by a few facets: document types, statuses, tags.
• Quick toggles where all options should stay visible at a glance.
• Not for choosing one of a few mutually exclusive views; use SegmentedControl or Tabs.
• Not for long option lists (more than a few dozen); use MorphSelect.

Usage

import { ChipGroup } from "@/components/iris/chip-group/chip-group";

const [types, setTypes] = useState(["task"]);
h(ChipGroup, {
  label: "Document types",
  options: [
    { value: "page", label: "Page" },
    { value: "task", label: "Task" },
    { value: "decision", label: "Decision" },
  ],
  value: types,
  onValueChange: setTypes,
  maxVisible: 6,
});

Props

Prop	Type	Default	Description
options	{ value: string; label: string }[]	required	Chips in display order.
value	string[]	required	Selected values (controlled).
onValueChange	(value: string[]) => void	required	Receives the new selection, ordered as in options.
label	string	required	Accessible name of the group, such as "Document types".
multiple	boolean	true	Allow several chips. In single mode the selected chip can still be cleared.
maxVisible	number	Infinity	Chips shown before the rest fold behind "+N more". Selected chips stay in view.
className	string	–	Added to the container.

Notes

• Keyboard: one tab stop (roving tabindex); arrows move between chips and wrap; Home/End jump; Enter or Space toggles or opens the overflow.
• The group has role="group" with its label; each chip is a toggle button with aria-pressed; the overflow chip reports aria-expanded.
• Reduced motion turns the check, label shift and reflow animation into short fades.
• Selected chips use --accent tints over --surface with --line; the check is --accent-ink.