Toggle group

GradeTested

UsageCopy Anchor Link

import { ToggleGroup, ToggleGroupItem } from "@cadence-clinical/ui";

<ToggleGroup aria-label="Text style" multiple value={styles} onValueChange={setStyles}>
  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
  <ToggleGroupItem value="underline">Underline</ToggleGroupItem>
</ToggleGroup>;

Give the group an aria-label, which names the set. value is always an array. One toggle is pressed at a time unless you set multiple.

Each ToggleGroupItem is a Toggle. Set variant, size and iconOnly once on the group, and they apply to every toggle in it. With iconOnly, keep each toggle's words: they are hidden from sight and are still its name.

Toggle group is built on the Base UI Toggle Group and accepts all of its props. It follows the shadcn Toggle Group. Toggle group is a composite: it uses the Toggle primitive.

Spaced or joinedCopy Anchor Link

spacing is the gap between toggles, in spacing units, and is 2 unless you set it. spacing={0} joins the toggles into one segmented control: they share their boundaries, and only the ends of the group are rounded. orientation="vertical" stacks them.

A group can have nothing pressedCopy Anchor Link

Pressing the pressed toggle releases it, so a group can end up with nothing pressed. That suits a set of filters or text styles. For a choice that must always have an answer, such as which of two views is shown, use Tabs or a Radio group.

What Cadence changesCopy Anchor Link

• Pressed never rests on colour. A pressed toggle has a fill and a boundary, as a Toggle does. Joined, the pressed toggle's boundary sits over its neighbours', so it stays whole. shadcn removes the shared edge, which leaves a pressed toggle with three sides.
• A group that does not fit wraps onto another row. No toggle is clipped.
• iconOnly can be set on the group, as variant and size can.
• Sizes follow the density. A toggle is a 44px target when the density is comfortable.
• Each toggle presses in under the pointer, as a Button does. The fill and boundary of a pressed toggle transition in over 150ms.

AccessibilityCopy Anchor Link

• The group is one stop for Tab. The arrow keys move between its toggles, and Space or Enter presses one.
• Each toggle has aria-pressed, and the group is named by its aria-label.

PropsCopy Anchor Link