Radio
A radio lets users select only one option from a set of choices.
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 { Radio } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| label * | ReactNode | None | What this option means. Write all the options the same way so people can compare them. |
| isDisabled | boolean | None | Use only when people can see why this option is unavailable. |
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.
- Radios with the same name form one group, so the arrow keys move between them.
- The group needs a name of its own, or each option is announced without the question it answers.
- Each label is linked to its input, so clicking the words selects the option.