Forms

Radio Group

A set of mutually exclusive options. Built on Base UI primitives with keyboard navigation and focus management.

Small

Medium

Large

Import

import {
  RadioGroup,
  RadioGroupItem,
  RadioGroupCard,
} from "@mikenotthepope/substrateui"

Composition

RadioGroup
├── RadioGroupItem
└── RadioGroupCard

As cards

RadioGroupItem is the 18px circle, and the target is the circle. RadioGroupCard is the same control grown into the whole row — 56px tall, a label and a muted description — and a tap anywhere in it selects. It also renders a submitted answer read-only, and a staff preview with no control in it at all, neither of them dimmed. See Choice Card.

Two weeksThe usual arrangementA month or more

API Reference

Prop	Type	Default	Description
`value`	`string`	—	The controlled value of the selected radio item.
`onValueChange`	`(value: string) => void`	—	Callback fired when the selected value changes.
`defaultValue`	`string`	—	The default value when uncontrolled.
`disabled`	`boolean`	`false`	When true, disables all radio items in the group.