Radio
A radio input allows users to select only one option from a number of choices.
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 { Radio } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| label * | ReactNode | — | What this option means. Keep the set parallel so they can be compared. |
| isDisabled | boolean | — | Use only when the reader can see why this option is unavailable. |
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.
- Radios sharing a name are one group, which is what makes the arrow keys move between them.
- The group needs a name of its own, or each option is announced without the question it answers.
- The label is tied to its input, so the words are part of the target.