import { Checkbox } from '@primitivekit/react';

<Checkbox label="Accept terms and conditions" />

<Checkbox size="small" label="Small checkbox" />
<Checkbox size="medium" label="Medium checkbox" />
<Checkbox size="large" label="Large checkbox" />

// Checked
<Checkbox checked label="Checked" />

// Unchecked
<Checkbox checked={false} label="Unchecked" />

// Indeterminate
<Checkbox indeterminate label="Indeterminate" />

// Disabled
<Checkbox disabled label="Disabled" />

// Disabled & Checked
<Checkbox disabled checked label="Disabled & Checked" />

<Checkbox colorScheme="primary" label="Primary" />
<Checkbox colorScheme="secondary" label="Secondary" />
<Checkbox colorScheme="success" label="Success" />
<Checkbox colorScheme="danger" label="Danger" />

import { useState } from 'react';

function ControlledCheckbox() {
  const [checked, setChecked] = useState(false);

  return (
    <Checkbox
      checked={checked}
      onChange={(e) => setChecked(e.target.checked)}
      label="Subscribe to newsletter"
    />
  );
}

function CheckboxGroup() {
  const [selected, setSelected] = useState<string[]>([]);

  const handleChange = (value: string) => {
    setSelected(prev =>
      prev.includes(value)
        ? prev.filter(v => v !== value)
        : [...prev, value]
    );
  };

  return (
    <div>
      <Checkbox
        checked={selected.includes('react')}
        onChange={() => handleChange('react')}
        label="React"
      />
      <Checkbox
        checked={selected.includes('vue')}
        onChange={() => handleChange('vue')}
        label="Vue"
      />
      <Checkbox
        checked={selected.includes('angular')}
        onChange={() => handleChange('angular')}
        label="Angular"
      />
    </div>
  );
}

<Checkbox
  label="Custom checkbox"
  style={{
    '--checkbox-size': '24px',
    '--checkbox-border-radius': '6px',
    '--checkbox-bg-color-checked': 'rgba(255, 0, 0, 1)',
    '--checkbox-border-color': 'rgba(200, 200, 200, 1)',
    '--checkbox-checkmark-color': 'rgba(255, 255, 255, 1)',
  }}
/>