Radio Group

A group of radio buttons where only one option can be selected at a time.

Preview · Radio Group

Code

HTML · @primus/ui-core

<div class="vstack" style="max-width:280px">
  <fieldset>
    <legend>Plan</legend>
    <label><input type="radio" name="plan" value="starter" /> Starter</label>
    <label><input type="radio" name="plan" value="pro" checked /> Pro</label>
    <label><input type="radio" name="plan" value="ent" disabled /> Enterprise</label>
  </fieldset>
  <fieldset>
    <legend>Billing</legend>
    <div class="hstack">
      <label><input type="radio" name="billing" /> Monthly</label>
      <label><input type="radio" name="billing" checked /> Annual</label>
    </div>
  </fieldset>
</div>

React

import { PrimusRadioGroup } from 'primus-react-ui';

const planOptions = [
  { value: 'starter', label: 'Starter' },
  { value: 'pro', label: 'Pro' },
  { value: 'enterprise', label: 'Enterprise', disabled: true },
];

<PrimusRadioGroup name="plan" options={planOptions} value={plan} onChange={setPlan} />
<PrimusRadioGroup name="billing" options={billingOptions} orientation="horizontal" />

Angular

<primus-radio-group label="Plan" name="plan" [options]="planOptions"
  [value]="selectedPlan" (valueChange)="onPlan($event)">
</primus-radio-group>
<primus-radio-group label="Billing" name="billing" [options]="billingOptions"
  orientation="horizontal">
</primus-radio-group>

Props

Prop	Type	Default	Description
name	string	required	Name attribute
options	{label,value,disabled?}[]	[]	Option list
value	string	—	Selected value
orientation	vertical | horizontal	vertical	Layout direction

Accessibility

• Wrap in <fieldset> + <legend> — the legend is announced as the group label
• Keyboard: arrow keys navigate between options within the group
• Selected option has aria-checked="true" automatically from the browser
• Never disable all options — if none are valid, disable the containing form section

Version history

See the Changelog for version history and breaking changes.