RadioGroup

import { useState } from 'react';
import { RadioGroup, RadioGroupItem } from '@components-kit/react';

// Basic radio group
<RadioGroup aria-label="Select option" variantName="default">
  <div>
    <RadioGroupItem id="option1" name="option" value="1" defaultChecked />
    <label htmlFor="option1">Option 1</label>
  </div>
  <div>
    <RadioGroupItem id="option2" name="option" value="2" />
    <label htmlFor="option2">Option 2</label>
  </div>
  <div>
    <RadioGroupItem id="option3" name="option" value="3" disabled />
    <label htmlFor="option3">Option 3 (disabled)</label>
  </div>
</RadioGroup>

// With fieldset and legend (recommended)
<fieldset>
  <legend>Choose your plan</legend>
  <RadioGroup variantName="default">
    <div>
      <RadioGroupItem id="basic" name="plan" value="basic" />
      <label htmlFor="basic">Basic - $9/month</label>
    </div>
    <div>
      <RadioGroupItem id="pro" name="plan" value="pro" />
      <label htmlFor="pro">Pro - $19/month</label>
    </div>
  </RadioGroup>
</fieldset>

// Controlled
function ControlledPreferences() {
  const [selected, setSelected] = useState('email');

  return (
    <RadioGroup aria-label="Notification preference">
      <div>
        <RadioGroupItem
          id="pref-email"
          name="preference"
          value="email"
          checked={selected === 'email'}
          onChange={(e) => setSelected(e.target.value)}
        />
        <label htmlFor="pref-email">Email</label>
      </div>
      <div>
        <RadioGroupItem
          id="pref-push"
          name="preference"
          value="push"
          checked={selected === 'push'}
          onChange={(e) => setSelected(e.target.value)}
        />
        <label htmlFor="pref-push">Push</label>
      </div>
    </RadioGroup>
  );
}