Switch

import { Switch } from 'yarcl';

Notifications onLarge, successDisabledA native checkbox with role="switch".

<Switch checked={on} onChange={(e) => setOn(e.target.checked)}>Notifications</Switch>

A native checkbox with role="switch", so screen readers announce it as on or off, and checked, defaultChecked and onChange work as usual. The track is sized from the size’s iconSize.

Props

Accepts every native <input> attribute except type, color and size.

Prop	Type	Default	Description
children	ReactNode		Label shown next to the switch.
color	Colorconfig	config.defaults.color	Track color when on, from the colors config.
size	Sizeconfig	config.defaults.size	Switch size, from the sizes config (scaled from the size's iconSize).