Always Light Always Dark System

Switch

An on-off state indicator

<Switch label="Let it go" onSwitch={(on) => console.log(`The switch is ${on ? 'on' : 'off'}`)} />

Let’s get one very important thing out of the way: this is a button, not a checkbox. A checkbox sets a value, but a switch does a thing. There’s no toggle-then-save; when a user flips a switch they expect the action to be taken immediately.

Lots of credit to Josh Collinsworth’s post on accessible toggle buttons which served as a guidebook on making this component.

Styles

  • --switch-radius: Set the border radius of the switch element. Default is 50% (fully rounded).