# Checkbox

Toggle checkbox component with label, tooltip support, and reactive state management.

## Tag

`Checkbox`

## Props

| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `label` | `string` | `-` | Label text for the checkbox |
| `value` | `boolean \| Signal<boolean>` | `false` | Checked state |
| `tooltip` | `string` | `-` | Tooltip text on hover |
| `toggle` | `boolean` | `false` | Display as toggle switch instead of checkbox |
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
| `onclick` | `function` | `-` | Click event handler |

## Styling

Checkbox supports all **daisyUI Checkbox and Toggle classes**:

| Category | Keywords | Description |
| :--- | :--- | :--- |
| Color (Checkbox) | `checkbox-primary`, `checkbox-secondary`, `checkbox-accent`, `checkbox-info`, `checkbox-success`, `checkbox-warning`, `checkbox-error` | Checkbox color variants |
| Size (Checkbox) | `checkbox-xs`, `checkbox-sm`, `checkbox-md`, `checkbox-lg` | Checkbox scale |
| Color (Toggle) | `toggle-primary`, `toggle-secondary`, `toggle-accent`, `toggle-info`, `toggle-success`, `toggle-warning`, `toggle-error` | Toggle color variants |
| Size (Toggle) | `toggle-xs`, `toggle-sm`, `toggle-md`, `toggle-lg` | Toggle scale |

> For further details, check the [daisyUI Checkbox Documentation](https://daisyui.com/components/checkbox) and [daisyUI Toggle Documentation](https://daisyui.com/components/toggle) – Full reference for CSS classes.

### Example

```javascript
// Checkbox
Checkbox({ class: "checkbox-primary checkbox-lg", label: "Accept terms" });

// Toggle switch
Checkbox({ toggle: true, class: "toggle-success", label: "Enable feature" });
```

## Live Examples

### Basic Checkbox

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
  </div>
</div>

```javascript
const BasicDemo = () => {
  const accepted = $(false);
  
  return Checkbox({
    label: 'I accept the terms and conditions',
    value: accepted,
    onclick: () => accepted(!accepted())
  });
};
Mount(BasicDemo, '#demo-basic');
```

### Toggle Switch

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-toggle" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
  </div>
</div>

```javascript
const ToggleDemo = () => {
  const enabled = $(false);
  
  return Div({ class: 'flex flex-col gap-4 w-full' }, [
    Checkbox({
      label: 'Enable notifications',
      value: enabled,
      toggle: true,
      onclick: () => enabled(!enabled())
    }),
    () => enabled() 
      ? Div({ class: 'alert alert-success' }, 'Notifications are ON')
      : Div({ class: 'alert alert-soft' }, 'Notifications are OFF')
  ]);
};
Mount(ToggleDemo, '#demo-toggle');
```

### With Tooltip

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-tooltip" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
  </div>
</div>

```javascript
const TooltipDemo = () => {
  const darkMode = $(false);
  
  return Checkbox({
    label: 'Dark mode',
    value: darkMode,
    tooltip: 'Enable dark theme preference',
    onclick: () => darkMode(!darkMode())
  });
};
Mount(TooltipDemo, '#demo-tooltip');
```

### Disabled State

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-disabled" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
  </div>
</div>

```javascript
const DisabledDemo = () => {
  return Div({ class: 'flex flex-col gap-3' }, [
    Checkbox({
      label: 'Checked and disabled',
      value: true,
      disabled: true
    }),
    Checkbox({
      label: 'Unchecked and disabled',
      value: false,
      disabled: true
    })
  ]);
};
Mount(DisabledDemo, '#demo-disabled');
```

### Reactive Multiple Selection

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-multiple" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```javascript
const MultipleDemo = () => {
  const options = [
    { id: 1, label: 'Option 1', selected: $(false) },
    { id: 2, label: 'Option 2', selected: $(false) },
    { id: 3, label: 'Option 3', selected: $(false) }
  ];
  
  const selectAll = $(false);
  
  const toggleAll = (value) => {
    selectAll(value);
    options.forEach(opt => opt.selected(value));
  };
  
  const updateSelectAll = () => {
    const allSelected = options.every(opt => opt.selected());
    selectAll(allSelected);
  };
  
  return Div({ class: 'flex flex-col gap-3' }, [
    Checkbox({
      label: 'Select all',
      value: selectAll,
      onclick: () => toggleAll(!selectAll())
    }),
    Div({ class: 'divider my-1' }),
    ...options.map(opt => Checkbox({
      label: opt.label,
      value: opt.selected,
      onclick: () => {
        opt.selected(!opt.selected());
        updateSelectAll();
      }
    })),
    Div({ class: 'mt-2 text-sm opacity-70' }, () => {
      const count = options.filter(opt => opt.selected()).length;
      return `${count} of ${options.length} selected`;
    })
  ]);
};
Mount(MultipleDemo, '#demo-multiple');
```

### All Variants

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
  </div>
</div>

```javascript
const VariantsDemo = () => {
  const variant1 = $(true);
  const variant2 = $(false);
  const variant3 = $(true);
  
  return Div({ class: 'flex flex-col gap-3' }, [
    Div({ class: 'flex items-center gap-4' }, [
      Checkbox({
        label: 'Primary',
        value: variant1,
        class: 'checkbox-primary',
        onclick: () => variant1(!variant1())
      }),
      Checkbox({
        label: 'Secondary',
        value: variant2,
        class: 'checkbox-secondary',
        onclick: () => variant2(!variant2())
      })
    ]),
    Div({ class: 'flex items-center gap-4' }, [
      Checkbox({
        label: 'Accent',
        value: variant3,
        class: 'checkbox-accent',
        onclick: () => variant3(!variant3())
      }),
      Checkbox({
        label: 'Toggle switch',
        value: $(false),
        toggle: true,
        class: 'toggle-primary'
      })
    ])
  ]);
};
Mount(VariantsDemo, '#demo-variants');
```

### Form Example

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```javascript
const FormDemo = () => {
  const subscribe = $(false);
  const weekly = $(false);
  const monthly = $(true);
  
  return Div({ class: 'flex flex-col gap-4' }, [
    Div({ class: 'text-sm font-bold' }, 'Newsletter preferences'),
    Checkbox({
      label: 'Subscribe to newsletter',
      value: subscribe,
      onclick: () => subscribe(!subscribe())
    }),
    () => subscribe() ? Div({ class: 'ml-6 flex flex-col gap-2' }, [
      Checkbox({
        label: 'Weekly updates',
        value: weekly,
        onclick: () => weekly(!weekly())
      }),
      Checkbox({
        label: 'Monthly digest',
        value: monthly,
        onclick: () => monthly(!monthly())
      })
    ]) : null,
    () => subscribe() && (weekly() || monthly())
      ? Div({ class: 'alert alert-success text-sm mt-2' }, 'You will receive updates!')
      : subscribe()
      ? Div({ class: 'alert alert-warning text-sm mt-2' }, 'Select at least one frequency')
      : null
  ]);
};
Mount(FormDemo, '#demo-form');
```