# Checkbox

## Example

```svelte
<script>
	import { Checkbox, Label } from '@foxui/all';
</script>

<h3>Primary</h3>

<div class="flex items-center gap-2">
	<Checkbox sizeVariant="sm" variant="primary" />
	<Checkbox sizeVariant="default" variant="primary" />
	<Checkbox sizeVariant="lg" variant="primary" />
</div>

<h3>Secondary</h3>

<div class="flex items-center gap-2">
	<Checkbox sizeVariant="sm" variant="secondary" />
	<Checkbox sizeVariant="default" variant="secondary" />
	<Checkbox sizeVariant="lg" variant="secondary" />
</div>

<h3>With Label</h3>

<div class="not-prose flex items-center space-x-2">
	<Checkbox id="terms" aria-labelledby="terms-label" variant="secondary" />
	<Label
		id="terms-label"
		for="terms"
		class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
	>
		Yes, I agree to the terms and sell my soul (and no I didn't read the terms)
	</Label>
</div>
```

## Documentation

## Usage

```svelte
<Checkbox sizeVariant="sm" variant="primary" bind:checked />
```

## Sources

This component uses the bits-ui component: Checkbox, see here for the documentation for that: https://bits-ui.com/docs/components/checkbox/llms.txt

## API Reference

### Checkbox
A control that allows the user to toggle between checked and not checked.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| checked | `boolean` | `false` | The checked state of the checkbox. (bindable) |
| indeterminate | `boolean` | `false` | Whether the checkbox is in an indeterminate state. (bindable) |
| variant | `'primary' | 'secondary'` | `'primary'` | The visual variant of the checkbox. |
| sizeVariant | `'default' | 'sm' | 'lg'` | `'default'` | The size of the checkbox. |
| disabled | `boolean` | `false` | Whether the checkbox is disabled. |
| required | `boolean` | `false` | Whether the checkbox is required. |
| name | `string` | `-` | The name of the checkbox used in form submission. |
| value | `string` | `-` | The value of the checkbox used in form submission. |
| onCheckedChange | `(checked: boolean) => void` | `-` | A callback invoked when the checked state changes. |
| onIndeterminateChange | `(indeterminate: boolean) => void` | `-` | A callback invoked when the indeterminate state changes. |
| class | `string` | `-` | Additional CSS classes to apply. |
| ref | `HTMLElement` | `-` | The underlying DOM element. You can bind to this to get a reference to the element. (bindable) |