Phoundry UI

RadioGroup

Radio button group with arrow-key navigation, horizontal/vertical layout, and per-option descriptions. Only the selected radio is in the tab order.

import { RadioGroup } from 'phoundry-ui';

Basic vertical

Selected: option1
Show code 
const options: RadioOption[] = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' },
];

<RadioGroup {options} value={selected} onchange={(v) => selected = v} />

Horizontal

Selected: sm
Show code 
<RadioGroup options={sizes} value={size} onchange={(v) => size = v} orientation="horizontal" />

With descriptions

Show code 
const plans: RadioOption[] = [
  { value: 'free', label: 'Free', description: 'Basic features for personal use' },
  { value: 'pro', label: 'Pro', description: 'Advanced features and priority support' },
  { value: 'enterprise', label: 'Enterprise', description: 'Custom solutions for large teams' },
];

<RadioGroup options={plans} value={plan} onchange={(v) => plan = v} />

Disabled option

Show code 
const options: RadioOption[] = [
  { value: 'a', label: 'Available' },
  { value: 'b', label: 'Also available' },
  { value: 'c', label: 'Unavailable', disabled: true },
];

<RadioGroup {options} value={val} onchange={(v) => val = v} />

Sizes (sm / md)

size="sm" (default)

size="md"

Show code 
<RadioGroup options={opts} value={v} onchange={set} size="md" />

Group disabled

Disables the entire radiogroup — individual option disabled flags add finer control.

Show code 
<RadioGroup options={opts} value={v} onchange={set} disabled />

Props

PropTypeDefaultDescription
options requiredRadioOption[]—Array of { value, label, description?, disabled? }
value requiredstring—Currently selected value
onchange required(value: string) => void—Called when selection changes
name string—Group name (auto-generated if omitted)
orientation 'vertical' | 'horizontal''vertical'Layout direction
size 'sm' | 'md''sm'Size of radio circles and text
disabled booleanfalseDisables all options
class string—Additional CSS classes on the group container

Usage tips

  • Arrow keys move selection between enabled options — no need to Tab through each radio.
  • Set disabled on individual options to grey them out while keeping the rest interactive.
  • Use orientation="horizontal" for compact option sets like size pickers.
  • The description field on options is great for plan selectors or settings with context.
  • Set name when embedding multiple groups in one form so browsers associate radios correctly (otherwise a random fallback name is generated).