ChipGroup

A set of chips that act as toggle buttons (aria-pressed) in a fieldset (a named group): pick several (type="multiple", default) or one (type="single"). Arrow keys, Home and End move between chips and Space or Enter toggles; the group works inside Field (named from its label, described by its hint and error) and submits one hidden input per selected value when named.

Import

import { ChipGroup } from "@jcsoftdev/ui/forms";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/forms/chip-group.

Usage

<ChipGroup options={options} aria-label="Subjects" />

Props

Prop	Type	Default	Description
type	"single" | "multiple"		Any number of chips can be on. This is the default. At most one chip is on.
value	string | string[]
defaultValue	string | string[]
onValueChange	((value: string[]) => void) | ((value: string) => void)
options *	readonly ChipGroupOption[]
disabled	boolean
name	string		Form field name: a hidden input per selected value.
invalid	boolean		Marks the group invalid (also set by Field through aria-invalid).
id	string		Set by Field; the group is named from the field’s label.
aria-label	string
aria-labelledby	string
aria-describedby	string
aria-invalid	boolean | "true" | "false"
size	"sm" | "md"		Minimum chip height: sm (default) is 30px (--control-height-sm), md 38px (--control-height-md), the heights of Button and Input of the same size.
className	string
classNames	Partial<Record<ChipGroupPart, string>>		Per-part classes merged with cn; consumer classes win. className still targets the root.

* marks a required prop.

Storybook stories

• Multiple
• Keyboard Roves And Toggles
• Tab Enters At First Chip When None Selected
• Single
• Single With Deselect
• Controlled
• Inside Field
• Submits Hidden Inputs
• Disabled

Source

packages/ui/src/forms/chip-group/chip-group.tsx