Radio

Radio represents one option in a mutually exclusive set. RadioGroup provides the shared name, selected value, direction, label, and controlled or uncontrolled group state.

Each radio supports default, sm, and xs visual sizes.

Basic groupCopy Anchor Link

import { Radio, RadioGroup } from '@mosmox/ui';

<RadioGroup label="Plan" name="plan" defaultValue="team">
  <Radio label="Personal" value="personal" />
  <Radio label="Team" value="team" />
  <Radio label="Enterprise" value="enterprise" />
</RadioGroup>

Only one radio in a group can be selected at a time. The group manages the native name and selection behavior.

Controlled groupCopy Anchor Link

const [plan, setPlan] = useState('team');

<RadioGroup
  label="Plan"
  name="plan"
  value={plan}
  onChange={(nextValue) => setPlan(nextValue)}
>
  <Radio label="Personal" value="personal" />
  <Radio label="Team" value="team" />
</RadioGroup>

Layout directionCopy Anchor Link

The default direction is vertical. Use horizontal for compact option sets.

<RadioGroup label="Size" direction="horizontal" defaultValue="default">
  <Radio label="Default" value="default" size="default" />
  <Radio label="Small" value="small" size="sm" />
  <Radio label="Extra small" value="extra-small" size="xs" />
</RadioGroup>

Descriptions, errors, and disabled optionsCopy Anchor Link

<RadioGroup label="Delivery" error="Choose a delivery method.">
  <Radio label="Standard" value="standard" description="Arrives in 3–5 days." />
  <Radio label="Express" value="express" disabled description="Not available for this address." />
</RadioGroup>

Both the group and an individual Radio can provide an error. Use a group error for selection validation and an individual error for an option-specific message.

Standalone radioCopy Anchor Link

Radio can also be used directly when a native name is supplied manually:

<Radio name="contact" label="Email" value="email" defaultChecked />
<Radio name="contact" label="Phone" value="phone" />

AccessibilityCopy Anchor Link

• RadioGroup renders a semantic fieldset and optional legend;
• radios in a group share one native name and preserve keyboard selection behavior;
• descriptions and errors are associated through aria-describedby;
• disabled options remain visible but cannot be selected;
• use a group label that describes the decision and option labels that are unambiguous.

Styling modelCopy Anchor Link

Radio colors, typography, focus, surface, and disabled treatment use shared theme tokens. Radio-specific circle geometry, selected dot, and group layout are in Radio.css.

API ReferenceCopy Anchor Link

RadioGroupCopy Anchor Link

RadioCopy Anchor Link

Other supported native radio input attributes are forwarded to the underlying <input>.