Demo

Toggle

On/off switch for boolean parameters. Supports switch style (iOS-like) and button style (DAW mute/solo).

Switch Style

iOS-style toggle switch with optional label.

Disabled

Sizes

Toggles come in three sizes.

Button Style (DAW Controls)

Compact button toggles for mute, solo, and record arm controls.

M: off | S: off | R: off

Button Toggle Sizes

Button-style toggles in different sizes.

Mixer Channel Strip Example

How toggles are used in a mixer context.

Kick
Snare
Hat
Bass
Keys
Lead

States

Toggles have different visual states.

Uncontrolled vs Controlled

Toggle supports both controlled and uncontrolled patterns.

Uses internal state
Parent manages state

Accessibility

Toggle accessibility features.

Keyboard

  • Enter or Space - Toggle on/off
  • Tab - Move focus

ARIA

  • role="switch" - Indicates toggle behavior
  • aria-checked - Current state
  • aria-label - Accessible name

Variants

  • default - Standard switch style
  • mute - Orange when active (muted)
  • solo - Yellow when active (soloed)
  • record - Red when active (armed)