Radio

Single-select radio button, always used inside a RadioGroup which manages roving-tabindex and keyboard navigation.

stable
since v0.1.0
2.92 kB
form
input

Preview

tsx

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

export default function Example() {
  return (
    <RadioGroup defaultValue="b" aria-label="Choose an option">
      <Radio value="a">Option A</Radio>
      <Radio value="b">Option B</Radio>
      <Radio value="c">Option C</Radio>
    </RadioGroup>
  );
}

Group

Use RadioGroup to manage selection and keyboard navigation across items.

Preview

Open

tsx

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

const plans = [
  { value: 'free', label: 'Free — $0/month' },
  { value: 'pro', label: 'Pro — $12/month' },
  { value: 'team', label: 'Team — $29/month' },
];

export default function Example() {
  const [plan, setPlan] = useState('pro');
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
      <RadioGroup value={plan} onValueChange={setPlan} aria-label="Subscription plan">
        {plans.map((p) => (
          <Radio key={p.value} value={p.value}>
            {p.label}
          </Radio>
        ))}
      </RadioGroup>
      <p style={{ fontSize: '0.875rem', color: 'var(--color-fg-muted, #6b7280)', margin: 0 }}>
        Selected: {plan}
      </p>
    </div>
  );
}

Disabled

Preview

Open

tsx

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

export default function Example() {
  return (
    <RadioGroup defaultValue="b" aria-label="Choose an option" disabled>
      <Radio value="a">Option A</Radio>
      <Radio value="b">Option B (selected)</Radio>
      <Radio value="c">Option C</Radio>
    </RadioGroup>
  );
}

API

PropTypeDefaultDescription

value*

string

—

Submitted value when this radio is selected.

disabled

boolean

—

Disables only this radio. To disable the whole group, set `disabled` on `<RadioGroup>`.

required

boolean

—

Marks the field as required for form submission.

string

—

Element id — auto-generated when omitted.

size

"sm"|"md"|"lg"

Control size.

invalid

boolean

—

Renders the invalid state and sets `aria-invalid`.

children

ReactNode

—

Optional label content — when provided, the radio renders inside a `<label>`.

className

string

—

Accessibility

The enclosing RadioGroup manages roving tabindex so only the selected item is in the tab order.
Each item exposes role="radio" with aria-checked reflecting the current value.
Arrow keys move selection within the group; Space/Enter select the focused item.

Recipes

Provide orientation="horizontal" on RadioGroup for inline layouts.
Always supply aria-label or aria-labelledby on RadioGroup so screen readers announce the group purpose.