Toggle
A toggle is used to view or switch between enabled or disabled states.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
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 | — | What the toggle controls. It is the accessible name, so it says the thing rather than the state. |
| isChecked | boolean | — | Whether it is on. A toggle usually takes effect at once, so this should follow the saved value. |
| isDisabled | boolean | — | Use only when the reader can see why. |
Anything else you pass is forwarded to the underlying input, so the standard attributes and event handlers work as they normally would.
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, which is what lets the announced state mean something.
- Because it acts immediately, anything irreversible behind one needs a confirmation of its own.