In context
Billing cadence with card-shaped rows, sprint feedback 1–5, role tier picker with helper text, and an equipment shipping selector.
Billing cadence
Card-shaped radio rows with price and tag.
How was your sprint?
1 = blocker week · 5 = best yet.
You selected 4 / 5.
Role tier
Helper text per choice describes the permission set.
Equipment shipping
Required selection before completing onboarding.
Default vertical layout
Vertical layout works best for 3-7 options where labels vary in length.
import { RadioGroup, RadioGroupItem } from '@mihcm/ui/RadioGroup';
<RadioGroup value="email" onValueChange={console.log}>
<RadioGroupItem value="email">Email</RadioGroupItem>
<RadioGroupItem value="sms">SMS</RadioGroupItem>
<RadioGroupItem value="push">Push notification</RadioGroupItem>
</RadioGroup>Horizontal orientation
Use orientation="horizontal" for short labels like size pickers.
<RadioGroup value="md" onValueChange={console.log} orientation="horizontal">
<RadioGroupItem value="sm">Small</RadioGroupItem>
<RadioGroupItem value="md">Medium</RadioGroupItem>
<RadioGroupItem value="lg">Large</RadioGroupItem>
</RadioGroup>Disabled group
A disabled group prevents selection on all items. The selected value remains visible.
<RadioGroup value="sms" onValueChange={console.log} disabled>
<RadioGroupItem value="email">Email</RadioGroupItem>
<RadioGroupItem value="sms">SMS</RadioGroupItem>
<RadioGroupItem value="push">Push notification</RadioGroupItem>
</RadioGroup>With Label pairing
Wrap in a <fieldset> with a Label for proper form semantics.
import { Label } from '@mihcm/ui/Label';
<fieldset>
<Label>Notification method</Label>
<RadioGroup value="email" onValueChange={console.log}>
<RadioGroupItem value="email">Email</RadioGroupItem>
<RadioGroupItem value="sms">SMS</RadioGroupItem>
</RadioGroup>
</fieldset>