Toggle Group
Toggles that work as one: one tab stop, arrow keys between items, one or several on.
Installation
npx @yolkui/cli add toggle-groupSingle
Without multiple, one item is on at a time, and pressing it again turns it off, so the group can be empty. When one must always be chosen, use a SegmentedControl.
Joined
spacing={0} joins the items into one control; outline items share one border at each seam. orientation="vertical" stacks them, and the arrow keys go up and down. variant, size, shape and fill on the group apply to every item.
Accessibility
Tab enters the group once, on the first item and afterwards on the one focused last; the arrow keys move between items, Home and End go to the ends, and Space or Enter toggles. Screen readers hear the group's name, then each item's name and whether it is pressed.
- Name the group with aria-label, e.g. "Text formatting"; a development warning says when it has none.
- An icon-only item needs an aria-label, and its name stays the same in both states.
- A disabled item, or a whole disabled group, stays reachable by Tab and the arrow keys but never changes, so a Tooltip can say why.