<RadioGroup
  name="notify"
  legend="Notification preference"
  options={[
    { value: 'email', label: 'Email' },
    { value: 'sms', label: 'SMS' },
    { value: 'none', label: 'None' },
  ]}
/>

<RadioGroup name="notify" legend="Notification preference" options={[...]} value="email" disabled />

function Demo() {
  const [v, setV] = useState('pro');
  const plans = [
    { value: 'free', label: 'Free',  hint: '$0/mo · 3 projects' },
    { value: 'pro',  label: 'Pro',   hint: '$12/mo · Unlimited' },
    { value: 'team', label: 'Team',  hint: '$49/mo · 10 seats'  },
  ];
  return (
    <fieldset className="space-y-2">
      <legend>Choose plan</legend>
      {plans.map(plan => (
        <label key={plan.value} className={cn(
          'flex items-start gap-3 rounded-lg border px-4 py-3 cursor-pointer',
          v === plan.value ? 'border-primary bg-primary-subtle' : 'border-border hover:bg-surface-overlay'
        )}>
          <input type="radio" name="plan" value={plan.value}
            checked={v === plan.value} onChange={() => setV(plan.value)} />
          <div>
            <span className={v === plan.value ? 'text-primary font-medium' : ''}>{plan.label}</span>
            <p className="text-xs text-text-secondary">{plan.hint}</p>
          </div>
        </label>
      ))}
    </fieldset>
  );
}