Radio Group
A set of radio buttons for selecting a single value from a list.
Overview
A radio group lets users pick exactly one option from a set of mutually exclusive
choices. List the options vertically, keep one option selected by default, and
expose every option at once. For long or space-constrained lists, prefer a
Select instead. Pair each radio with a Label
for an accessible, clickable target.
$ npx morpha-ui add radio-groupExamples
With label
Associate each RadioGroupItem with a Label via matching id / htmlFor so the
text is clickable and announced.
Invalid
Set aria-invalid to switch a radio to the error tone — a red ring whether or not
it is selected, with an error-tinted state layer.
States
The radio follows the MD3 state-layer model: a circular overlay tints the control on hover (8%) and on focus or press (10%), with a secondary focus ring.
Disabled
A disabled radio dims its ring (and dot, when selected) to 38%.
Installation
Morpha UI components are distributed via the Morpha CLI (coming in a later
step): npx morpha-ui add radio-group. In the meantime, since this is the base
shadcn component, you can also add it directly:
npx shadcn@latest add radio-groupAPI Reference
RadioGroup
Prop
Type
RadioGroupItem
Prop
Type
Accessibility
- Each
RadioGroupItemneeds avalue; associate a<Label htmlFor>with itsidso the label is clickable and announced. - Always keep one option selected — pass
defaultValue(uncontrolled) orvalue(controlled) — so the group has a defined state. - Selection state and group semantics are exposed to assistive tech by the underlying Base UI primitive.
- Set
aria-invalidto expose the error state to assistive tech (and render the error tone). - The hit target is at least 44×44px even though the ring is 20px, meeting touch-target guidance.
- Keyboard: Tab moves focus into the group; ↑/↓ (or ←/→) move the selection between options.