Toggle
A toggle shows whether a setting is on or off, and switches between the two.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { Toggle } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| label * | string | None | What the toggle controls. It is the accessible name, so name the setting, not the state. |
| isChecked | boolean | None | Whether it is on. A toggle usually takes effect at once, so this should follow the saved value. |
| isDisabled | boolean | None | Use only when people can see why. |
Any other props are passed to the underlying input, so standard attributes and event handlers work as usual.
Accessibility
What the component does for you, and what it needs from you.
- It is a real checkbox underneath, so it reports its checked state and works with Space.
- The label names the setting, so the announced on or off state makes sense.
- It acts immediately, so anything that cannot be undone needs its own confirmation.