Toggle group

Single-select (segmented)

The container owns the frame; members go ghost-rest so the cluster reads as one segmented control. Click and arrow-key wiring (data-stisla-toggle-group) ships with the behavior layer. Use role="radiogroup" on the wrapper and role="radio" + aria-checked on each member; the CSS hook is data-state="active" on the current one. The type autodetects from role="radiogroup".

Keyboard

Roving tabindex keeps one member in the tab order at a time, so Tab leaves the group naturally. Arrow keys move focus along the group's orientation. In single-select mode focus is selection (WAI-ARIA radio-group); multi-select decouples them.

Multi-select

Each member is an independent press toggle: role="group" on the wrapper, aria-pressed on each member. The type autodetects to multiple when no radio role is present.

Text labels and icon + label

Members can carry text instead of, or alongside, icons. The group's width grows to fit.

Form data (radio set)

For single-select that submits with a form, use native radios: a hidden .toggle-input drives each paired .toggle label. Fully interactive, no JS.

Form data (checkbox set)

For multi-select form data, use native checkboxes the same way. Multiple labels can be active at once.

Vertical

Add .toggle-group--vertical to stack members as a menu list (full-width, start-aligned, compact row height).

Sizes

Add .toggle-group--sm or .toggle-group--lg; the container and its members scale together.

Events

Two events fire on the group's root.

stisla:toggle-group:changing fires before a flip and is cancelable. In single-select mode detail carries value, member, previousValue, and previousMember. In multi-select mode detail carries the proposed value array, the member being toggled, and action ('pressed' or 'unpressed'). Call preventDefault() to abort the flip.

stisla:toggle-group:changed fires after the flip lands with the same detail shape (final values). Not cancelable.

Customization

These variables retune .toggle-group; member chips read the --toggle-* variables (see Toggle).