Radio group

RadioGroup is a single-select control that renders a list of Radio options inside a native <fieldset>. The wrapper owns the shared name, the controlled value, and the orientation; the browser owns exclusivity and roving arrow-key focus because the children are native radios sharing one name.

Use it for

• Choosing exactly one option from a short, visible set (a plan, a delivery speed, a payment method)
• Any single choice where all options should stay on screen rather than behind a menu

Import

import { RadioGroup } from '@brikdesigns/bds';

Variants

Default

import { useState } from 'react';

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

<RadioGroup
  legend="Plan"
  value={plan}
  onChange={setPlan}
  options={[
    { label: 'Basic', value: 'basic' },
    { label: 'Pro', value: 'pro' },
    { label: 'Enterprise', value: 'enterprise' },
  ]}
/>

Orientation

Set orientation="horizontal" for a compact inline row; the default is a vertical stack.

<RadioGroup orientation="horizontal" legend="Billing" value={cycle} onChange={setCycle} options={cycles} />

When not to use

• Don't use it for two mutually exclusive views or modes. A pair like grid-vs-list is a SegmentedControl, not a radio group.
• Don't hide the options behind a trigger. If the list is long or space is tight, use Select instead.

Accessibility

• Renders a <fieldset role="radiogroup">; a legend prop is the group's visible label. Omit legend and pass aria-label to label the group without visible text.
• Each option is a native <input type="radio"> sharing one name, so the browser enforces single-selection and arrow-key roving focus with no custom key handling.
• Tab reaches the group; arrow keys move selection within it.

API