RadioGroup

Mutually exclusive option selection. Renders a fieldset with role="radiogroup" and individual RadioGroupItem buttons with role="radio".

Use cases

• Single choice from a short list (2-7 options) where all options should be visible.
• Form fields where the user must pick exactly one value (e.g. payment method, notification preference).
• Settings where the choices are mutually exclusive.

When NOT to use

• For long lists (8+ options) — use a Select dropdown instead.
• For multi-select — use CheckboxGrid or individual Checkboxes.
• For binary on/off — use a Switch.

Import

import { RadioGroup, RadioGroupItem } from '@mihcm/ui/RadioGroup';

Basic usage

const [value, setValue] = useState('email');
 
<RadioGroup value={value} onValueChange={setValue}>
  <RadioGroupItem value="email">Email</RadioGroupItem>
  <RadioGroupItem value="sms">SMS</RadioGroupItem>
  <RadioGroupItem value="push">Push notification</RadioGroupItem>
</RadioGroup>

Horizontal layout

<RadioGroup value={value} onValueChange={setValue} orientation="horizontal">
  <RadioGroupItem value="sm">Small</RadioGroupItem>
  <RadioGroupItem value="md">Medium</RadioGroupItem>
  <RadioGroupItem value="lg">Large</RadioGroupItem>
</RadioGroup>

Composition

• Wrap in a Label or pair with a <fieldset> + <legend> for form accessibility.
• disabled on an individual item greys it out without affecting siblings.
• disabled on the group disables all items.
• Pass orientation="horizontal" for inline layouts (size pickers, short option lists).

Related

• Select — dropdown for long option lists (8+).
• CheckboxGrid — multi-select equivalent.
• Switch — binary on/off toggle.
• Toggle — button-style single/multi select.