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.
--switch-radius
: Set the border radius of the switch element. Default is 50% (fully rounded).