RadioGroup

Coordinates a set of Radio children into a single-select group with roving tabindex.

stable
since v0.1.0
1.96 kB
forms

Preview

tsx

import { Radio, RadioGroup } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <RadioGroup defaultValue="pro" aria-label="Subscription plan">
      <Radio value="free">Free</Radio>
      <Radio value="pro">Pro</Radio>
      <Radio value="team">Team</Radio>
    </RadioGroup>
  );
}

Orientation

Set orientation to "horizontal" to lay out radios in a row (default is "vertical").

Preview

Open

tsx

import { Radio, RadioGroup } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
      <RadioGroup defaultValue="m" orientation="horizontal" aria-label="Size">
        <Radio value="s">S</Radio>
        <Radio value="m">M</Radio>
        <Radio value="l">L</Radio>
        <Radio value="xl">XL</Radio>
      </RadioGroup>
      <RadioGroup defaultValue="standard" orientation="vertical" aria-label="Shipping">
        <Radio value="standard">Standard (3–5 days)</Radio>
        <Radio value="express">Express (1–2 days)</Radio>
        <Radio value="overnight">Overnight</Radio>
      </RadioGroup>
    </div>
  );
}

Controlled

Pass value and onValueChange to drive the selection from parent state.

Preview

Open

tsx

import { Radio, RadioGroup } from '@arshad-shah/cynosure-react';
import { useState } from 'react';

export default function Example() {
  const [value, setValue] = useState('light');
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
      <RadioGroup value={value} onValueChange={setValue} aria-label="Theme">
        <Radio value="light">Light</Radio>
        <Radio value="dark">Dark</Radio>
        <Radio value="system">System</Radio>
      </RadioGroup>
      <span style={{ fontSize: '0.875rem', color: 'var(--c-fg-muted)' }}>Selected: {value}</span>
    </div>
  );
}

Disabled

Disable the entire group with disabled.

Preview

Open

tsx

import { Radio, RadioGroup } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <RadioGroup defaultValue="pro" disabled aria-label="Plan">
      <Radio value="free">Free</Radio>
      <Radio value="pro">Pro</Radio>
      <Radio value="team">Team</Radio>
    </RadioGroup>
  );
}

API

PropTypeDefaultDescription

value

string

—

Controlled selected radio value.

defaultValue

string

—

Uncontrolled initial selected value.

onValueChange

((value: string) => void)

—

Fires with the next value on selection change.

name

string

—

Submitted form field name shared across every radio in the group.

disabled

boolean

—

Disables every radio in the group.

required

boolean

—

Marks the field as required for form submission.

orientation

"horizontal"|"vertical"

vertical

Layout direction. Affects arrow-key navigation.

aria-label

string

—

`aria-label` for the group when no visible label is provided.

aria-labelledby

string

—

`aria-labelledby` — typically the id of a companion `<Label>`.

string

—

className

string

—

Accessibility

Renders role="radiogroup" — supply an aria-label or aria-labelledby for assistive tech.
Arrow Up/Down (vertical) or Arrow Left/Right (horizontal) moves selection between radios.
Tab enters the group at the currently-selected (or first) radio and leaves on the next Tab.
Setting required on the group marks the field required for form submission.

Recipes

Use for mutually exclusive options like pricing tiers, shipping methods, or sort order.
For 5+ options or long labels, consider Select or Combobox instead.
Pair with a Label + aria-labelledby when you need a visible caption.