/// Inputs
RadioGroup
One-of-many selection with sharp square markers; the active option carries the accent fill.
import { RadioGroup, RadioGroupItem } from "@protocore/pds";Basics
Wrap RadioGroup.Items in a RadioGroup. Each item takes a value and a label; the group is controllable via value / defaultValue.
Disabled option
Disable an individual RadioGroup.Item to show an option that exists but isn't available on the current plan.
In a Field
Drop the group inside a Field for a mono caption and hint text with wired ARIA. Here it's fully controlled from state.
Sets the default SLA and billing rate.
When to use it
Use a RadioGroup for a single choice among a small, fixed set (roughly 2–6 options) where seeing every option at once aids the decision. When options exceed what fits comfortably, switch to Select. For 2–4 short, equal-weight options that read like a toggle (a view mode, a time range), SegmentedControl is more compact. When any number of options may be selected, use Checkbox instead.
Usage
Do
- Give the group an accessible name via a wrapping `Field` label or `aria-label`.
- Provide a sensible `defaultValue` so the group is never in an empty state.
- Keep option labels parallel in structure and length.
- Order options logically — by magnitude, frequency, or recommended-first.
Don't
- Don't use a radio group for more than a handful of options — use Select.
- Don't use it for independent on/off toggles — use Checkbox.
- Don't leave every option unselected on first render unless 'none' is a real value.
- Don't nest interactive controls inside a radio label.
Accessibility
| Keys | Action |
|---|---|
| Tab | Move focus into the group, landing on the selected item (or the first item). |
| Arrow Down / Right | Move to and select the next enabled option. |
| Arrow Up / Left | Move to and select the previous enabled option. |
| Space | Select the focused option. |
- Built on Radix RadioGroup with roving tabindex — the group is a single Tab stop.
- Exposes `role="radiogroup"`; each item is a `role="radio"` with `aria-checked`.
- Disabled items are skipped during arrow navigation.
RadioGroup props
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | — | |
className | string | — | |
style | CSSProperties | — |
RadioGroupItem props
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | — | |
className | string | — | |
label | ReactNode | — | Text rendered beside the marker (sans 14). |
style | CSSProperties | — |