Radio

Radio is a themed radio button with required label text. Group radios by their shared name prop — only one radio per group can be selected. Use for "pick exactly one" decisions among a small fixed set.

Use it for

• Plan / tier selection on signup
• Theme picker (Light / Dark / System)
• Mutually exclusive settings (Layout: Compact / Comfortable / Spacious)
• Fixed-set choices with ≤5 options

For ≥6 options, use Select. For boolean (single yes/no), use Checkbox or Switch.

Import

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

Variants

Basic group

Same name ties radios into a group. Only one can be checked at a time.

<Radio name="plan" value="basic" label="Basic Plan" />
<Radio name="plan" value="pro" label="Pro Plan" defaultChecked />
<Radio name="plan" value="enterprise" label="Enterprise Plan" />

Controlled group

Track selection in parent state; switch the checked derivation per radio.

import { useState } from 'react';

const [selected, setSelected] = useState('pro');

<Radio
  name="plan"
  value="basic"
  label="Basic Plan"
  checked={selected === 'basic'}
  onChange={(e) => setSelected(e.target.value)}
/>
<Radio
  name="plan"
  value="pro"
  label="Pro Plan"
  checked={selected === 'pro'}
  onChange={(e) => setSelected(e.target.value)}
/>

Disabled

<Radio name="plan" value="enterprise" label="Enterprise (contact sales)" disabled />

When not to use

• Don't use Radio for ≥6 options. A vertical list of radios is unscannable. Use Select.
• Don't use Radio for boolean. "Yes / No" with two radios is awkward; use a Checkbox for opt-in or Switch for a setting.
• Don't forget name. Radios without a shared name aren't grouped — multiple can be selected, defeating the entire control.

Accessibility

• Renders a real <input type="radio"> — keyboard arrow keys move focus and selection within a group, Tab moves between groups.
• The label prop auto-wires the <label> so clicking the label selects the radio.
• Wrap a Radio group in a <fieldset> with a <legend> to surface the group's purpose ("Choose a plan").

API

Plus all standard <input> HTML attributes (excluding type).

Related

• Checkbox — multiple-of-many sibling
• Select — better for ≥6 options
• SegmentedControl — horizontal alternative for ≤4 short-label options
• Storybook playground