Toggle

Usage

import { Switch } from '@wdzyi/ui';

<Switch
  label='Email digest'
  description='A summary every Monday'
  checked={digest}
  onChange={setDigest}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

checked, defaultCheckedboolean

On, when you hold the state, or where it starts when it holds its own.

onChange(checked: boolean) => void

Called with the new state.

labelReactNode

Makes it a settings row, with this as its name. Without one, give it an aria-label.

descriptionReactNode

Under the label, quieter, and read out after it.

size'md' | 'lg' = 'md'

A track of 40 by 24, or 56 by 32.

disabled, idboolean, string

As for any button. The id is the switch’s own, for a label of your own to point at.

Notes

• The knob is held by its two edges, each with its own transition on the same curve: the leading edge takes 200ms and the trailing one 260ms. So it stretches by about a sixth on the way and gathers itself back to a square as it lands, with nothing past the end and no bounce.
• The track crossfades from a faint plate to ink over 240ms, behind a knob that’s the page’s colour either way, so on reads at a glance in either theme and the knob never fades into the track on the way. Turned again mid-way, it heads back from wherever it is.
• It’s a button with the switch role, so Space and Enter work it, and a screen reader hears on or off. In a row, pressing the words works it too. It sends toggle-on and toggle-off as it turns, whoever turned it.
• With reduced motion, the knob is where it’s going at once, and only the track fades.