Checkbox

A checkbox component with label, loading state, and size variants.

Import

import { Checkbox } from '@/components/ui';

Basic Usage

'use client';
import { useState } from 'react';
import { Checkbox } from '@/components/ui';

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

  return (
    <Checkbox
      checked={checked}
      onChange={(e) => setChecked(e.target.checked)}
    />
  );
}

Props

With Label

<Checkbox
  label="I agree to the terms and conditions"
  checked={checked}
  onChange={(e) => setChecked(e.target.checked)}
/>

With Error

<Checkbox
  label="Accept terms"
  checked={checked}
  onChange={(e) => setChecked(e.target.checked)}
  error="You must accept the terms to continue"
/>

Loading State

<Checkbox
  label="Processing..."
  checked={checked}
  isLoading={true}
/>

Sizes

<Checkbox size="sm" label="Small" />
<Checkbox size="md" label="Medium (Default)" />
<Checkbox size="lg" label="Large" />

Form Example

'use client';
import { useState } from 'react';
import { Checkbox, Button } from '@/components/ui';

export function SettingsForm() {
  const [settings, setSettings] = useState({
    emailNotifications: true,
    smsNotifications: false,
    marketingEmails: false,
  });

  const handleChange = (key) => (e) => {
    setSettings({ ...settings, [key]: e.target.checked });
  };

  return (
    <form className="space-y-4">
      <Checkbox
        label="Email notifications"
        checked={settings.emailNotifications}
        onChange={handleChange('emailNotifications')}
      />
      <Checkbox
        label="SMS notifications"
        checked={settings.smsNotifications}
        onChange={handleChange('smsNotifications')}
      />
      <Checkbox
        label="Marketing emails"
        checked={settings.marketingEmails}
        onChange={handleChange('marketingEmails')}
      />
      <Button color="blue">Save Preferences</Button>
    </form>
  );
}

Multiple Selection

'use client';
import { useState } from 'react';
import { Checkbox } from '@/components/ui';

const options = [
  { id: 'react', label: 'React' },
  { id: 'vue', label: 'Vue' },
  { id: 'angular', label: 'Angular' },
  { id: 'svelte', label: 'Svelte' },
];

export function MultiSelect() {
  const [selected, setSelected] = useState([]);

  const handleToggle = (id) => (e) => {
    setSelected(
      e.target.checked
        ? [...selected, id]
        : selected.filter((s) => s !== id)
    );
  };

  return (
    <div className="space-y-2">
      {options.map((option) => (
        <Checkbox
          key={option.id}
          label={option.label}
          checked={selected.includes(option.id)}
          onChange={handleToggle(option.id)}
        />
      ))}
    </div>
  );
}