Use for 2 to 5 mutually exclusive choices.
Radio
Single-choice control set composed with RadioGroup and Radio items.
- .source-radio-group Group wrapper and orientation container
- .source-radio-root Radio row label
- .source-radio-control Outer circle control
- .source-radio-input Native radio input
- .source-radio-dot Inner selected indicator
States
StateAppearance
UncheckedNeutral border with empty center.
CheckedSemantic border and filled center dot.
FocusFocus-visible ring on radio control.
DisabledMuted and non-interactive.
Design intent
Radio works for small sets of mutually exclusive options that benefit from side-by-side comparison. Two to five visible options is the right range. Beyond that, a Select dropdown is easier to scan. Radio puts all choices in the open, which is why it is right when users need to see the full range before deciding.
When to use
Do
Show all options at once for quick comparison.
Set a default when one option is the likely choice.
Don't
Use for long option sets. Use Select instead.
Use when users can pick more than one option.
Hide meaning in vague or icon-only labels.
Group orientation
Default orientation is vertical. Use horizontal when options are short and the container has enough width.
Designer checklist
- All options within a RadioGroup share the same name for mutual exclusivity.
- At least one option is pre-selected when a sensible default exists.
- Labels are short enough to scan without reading carefully.
- Option count is five or fewer. More than five options should use Select.
RadioGroup props
PropTypeDefaultDescription
namestringrequiredShared radio input name.
value / defaultValuestringnullControlled or uncontrolled selected value.
onChange(value: string) => voidnullFires on value change.
orientationvertical | horizontalverticalLayout direction.
paletteneutral | accent | success | warning | danger | infoaccentSelected control palette.
Radio props
PropTypeDefaultDescription
valuestringrequiredValue for this option.
labelReactNodenullVisible option label.
hintstringnullOptional secondary description.
Basic usage
import { RadioGroup, Radio } from '@pierredelattre/source-react';
<RadioGroup name="contact" value={contact} onChange={setContact}>
<Radio value="email" label="Email" />
<Radio value="sms" label="SMS" />
</RadioGroup>Horizontal usage
<RadioGroup
name="density"
defaultValue="comfortable"
orientation="horizontal"
palette="info"
>
<Radio value="compact" label="Compact" />
<Radio value="comfortable" label="Comfortable" />
</RadioGroup>Component tokens
TokenDefault
--source-radio-size1rem
--source-radio-border-checked--source-color-accent
--source-radio-dot-color--source-color-accent
ARIA attributes
AttributePurpose
role="radiogroup"Identifies grouped single-choice context.
type="radio" + nameNative radio semantics and exclusivity behavior.
Keyboard support
KeyBehavior
TabMoves focus into and out of group.
Arrow keysMove selection between radio options.
SpaceSelects focused option.