Radio
One of several mutually exclusive options. Grouped by a shared `name`.
import Radio from '@/components/ui/Radio';Source: src/components/ui/Radio.tsx
Examples
A group
The shared `name` is what makes them exclusive and what makes arrow keys move between them. Without it they are independent checkboxes that happen to look round.
Selected: bank
Props
<Radio> props
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | — | — |
Also accepts everything in InputHTMLAttributes<HTMLInputElement> — so native attributes (id, onClick, aria-*, data-*) pass straight through.
Accessibility
- Arrow keys move within the group and the group counts as one tab stop — that comes from the shared `name`.
Usage
Do
- Always give every radio in a group the same `name`.
- Pre-select a sensible default.
Don’t
- Don’t use radios for two options where one is clearly the default — a Toggle says more with less.
- Don’t use them without a group label; wrap the set in a fieldset with a legend.