Skip to content

Switch

import { Switch } from '@yarcl/react';
A 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.

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

PropTypeDefaultDescription
childrenReactNodeLabel shown next to the switch.
colorColorconfigconfig.defaults.colorTrack color when on, from the colors config.
size'lg' | 'xs' | 'sm' | 'md' | 'xl'config.defaults.sizeSwitch size, from the sizes config (scaled from the size's iconSize).