Toggle Group

Choose one or more related toggle options.

Live example

A reviewed public example, isolated from this page.

import {
  ToggleGroupRoot,
  ToggleGroupItem,
} from "heidi-ui/toggle-group";
import "heidi-ui/toggle-group/base.css";

Copy this one primitive from its hosted source recipe or install the whole package from the Heidi UI overview.

item<button>
Toggle button inside the group; value identifies selection. aria-pressed + data-state on|off.
Uses native semantics
root<div>
Group container; role=group with required label. Owns arrow-key focus among items. Orientation is exposed as data-orientation only — ARIA does not allow aria-orientation on role=group.
ARIA role: group