import { Radio, RadioGroup } from '@primitivekit/react';

<Radio label="Option 1" name="option" value="1" />
<Radio label="Option 2" name="option" value="2" />

<RadioGroup name="plan" defaultValue="basic">
  <Radio value="basic" label="Basic Plan" />
  <Radio value="pro" label="Pro Plan" />
  <Radio value="enterprise" label="Enterprise Plan" />
</RadioGroup>

<RadioGroup name="size">
  <Radio size="small" value="s" label="Small" />
  <Radio size="medium" value="m" label="Medium" />
  <Radio size="large" value="l" label="Large" />
</RadioGroup>

<RadioGroup name="color">
  <Radio colorScheme="primary" value="1" label="Primary" />
  <Radio colorScheme="secondary" value="2" label="Secondary" />
  <Radio colorScheme="success" value="3" label="Success" />
  <Radio colorScheme="danger" value="4" label="Danger" />
</RadioGroup>

<RadioGroup name="disabled">
  <Radio value="1" label="Enabled" />
  <Radio value="2" label="Disabled" disabled />
  <Radio value="3" label="Disabled & Selected" disabled checked />
</RadioGroup>

import { useState } from 'react';

function ControlledRadioGroup() {
  const [value, setValue] = useState('basic');

  return (
    <RadioGroup 
      name="plan" 
      value={value}
      onChange={(e) => setValue(e.target.value)}
    >
      <Radio value="basic" label="Basic - $9/mo" />
      <Radio value="pro" label="Pro - $29/mo" />
      <Radio value="enterprise" label="Enterprise - $99/mo" />
    </RadioGroup>
  );
}

<RadioGroup name="plan">
  <Radio 
    value="basic" 
    label="Basic Plan"
    description="Perfect for individuals"
  />
  <Radio 
    value="pro" 
    label="Pro Plan"
    description="Best for small teams"
  />
  <Radio 
    value="enterprise" 
    label="Enterprise Plan"
    description="For large organizations"
  />
</RadioGroup>

<Radio
  label="Custom radio"
  value="custom"
  style={{
    '--radio-size': '24px',
    '--radio-border-color': 'rgba(100, 100, 200, 1)',
    '--radio-bg-color-checked': 'rgba(255, 0, 0, 1)',
    '--radio-dot-size': '12px',
  }}
/>