Toggle Group

AnatomyCopy Anchor Link

import { Toggle, ToggleGroup } from '@addstack/daw-ui/react';

<ToggleGroup>
  <Toggle />
</ToggleGroup>

Toggles can sit anywhere inside the group, in any markup: in rows of a sequencer, or in the channel strips of a mixer.

PaintingCopy Anchor Link

With paint, pressing a toggle and dragging sets every toggle the pointer crosses to the state the first one took: start on an empty step to fill, on a filled one to clear. The whole segment between two pointer events is tested, so a fast drag does not skip steps, and a toggle is set at most once per stroke. With erase="secondary", the right button always clears, as in FL Studio.

From the keyboard, Shift+arrow moves to the next toggle and gives it the state of the current one.

LanesCopy Anchor Link

Toggles with the same lane form a line: a row of a step sequencer, or the mute buttons of a mixer's channels. A stroke paints along the lane where it started, even when the pointer drifts over the next one; an exclusive press only turns off toggles in its lane; the arrow keys move along a lane and across lanes.

StateCopy Anchor Link

Two ways, which can be mixed:

• The group holds it. Toggles with a value are pressed when the group's value (or defaultValue) contains it. A step sequencer's pattern is one array: ["kick:0", "kick:4", …].
• Each toggle holds its own. Toggles without a value use pressed / onPressedChange, for example from a store per track. The group only coordinates them.

Exclusive pressesCopy Anchor Link

exclusive="click" makes a press turn off the other toggles in its lane, as Ableton Live's solo does; Cmd/Ctrl+click adds instead. "modifier" is the other way around. A map sets it per lane:

<ToggleGroup exclusive={{ solo: 'click' }}>

GesturesCopy Anchor Link

onGestureStart and onGestureEnd wrap each user action: a press, a paint stroke, an exclusive press that turns five toggles off. Use them to make each action one undo step:

<ToggleGroup paint onGestureStart={() => history.begin('Mute')} onGestureEnd={() => history.commit()}>

KeyboardCopy Anchor Link

The group is one tab stop: Tab reaches the last focused toggle.

Without lanes, orientation decides: a row, a column, or a grid of columns.

API referenceCopy Anchor Link

Renders a <div> with role="group".

See Toggle for the toggles' own props, including lane and value.