Selection
Chip group
Single or multiple selection, mandatory and max rules, and one tab stop — standalone chips still work.Anatomy
The public structure is divided into four responsibilities.
- 1
Group root
A role=group container owning gap, direction, wrap and native overflow.
- 2
Selection facade
Single/multiple, mandatory, max and comparator rules delegated to the shared registry.
- 3
Chip tickets
Per-chip reactive value, selected, disabled, blocked and tabindex state.
- 4
Focus registry
An ordered element list used only for arrow, Home and End movement.
Interactive configuration
Switch selection rules and layout, then try the max limit and a mixed group.
Toggle buttons, not tabs
Chips expose aria-pressed; no tablist or fake checkbox roles are introduced.
Max blocks, never mutates
At the limit, unselected chips are announced unavailable; selected ones stay operable to free capacity.
States
States preserve accessibility and expected feedback.
Pressed chip
Selection is reflected by aria-pressed and the chip selected tokens.
Unavailable
Group or chip disabled renders a natively disabled button outside the tab order.
Limit reached
Unselected chips become aria-disabled and are skipped by selection and focus movement.
Roving entry
One tab stop enters the group; arrows move between focusable chips.
In context
A data-driven multiple selection with a max limit.
Selected: design (max 3)