Checkbox

Allow users to check and uncheck things.

<script lang="ts">
	import { Checkbox } from 'lithesome';
	import { cn } from '$site/index.js';
	import { CheckIcon, MinusIcon } from 'lucide-svelte';
</script>

<div class="flex items-center gap-4">
	<Checkbox
		checked="mixed"
		id="checkbox"
		class={({ checked }) =>
			cn(
				'flex h-8 w-8 rounded-md border border-black/10 bg-black/5 dark:border-white/10 dark:bg-white/5',
				checked ? 'border-black bg-black text-white dark:border-white dark:bg-white dark:text-black' : ''
			)}
	>
		{#snippet children({ checked })}
			{#if checked}
				{#if checked === 'mixed'}
					<MinusIcon />
				{:else}
					<CheckIcon />
				{/if}
			{/if}
		{/snippet}
	</Checkbox>
	<label for="checkbox" class="cursor-pointer select-none">I agree to sell all my data 👍</label>
</div>

Prop	Type	Description
`checked`	`boolean \| 'mixed'` `Default: false`	Whether or not the checkbox is checked or not.
`required`	`boolean` `Default: false`	Applies the aria-required attribute.
`disabled`	`boolean` `Default: false`	Disables the checkbox, disallowing the toggling of states.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLInputElement` `Default: ——`	The underlying html element that you can use to bind to.

Child prop	Type	Description
`checked`	`boolean`	Whether or not the checkbox is checked or not.

Data attribute	Value	Description
`data-checkbox`	`''`	The base data attribute, can be used for styling.
`data-state`	`'checked' \| 'unchecked'`	Whether or not the checkbox is checked or not.

Event	Param & Return	Description
`onClick`	`(e: MouseEvent)` `void`

Basic Example

<script>
	import { Checkbox } from 'lithesome';
</script>

<Checkbox />

Native Input element

Since the <Checkbox /> component is rendering a button, you cannot use it for native form submissions.

If you want to use a native <input /> checkbox for forms, simply bind the checked from the button to the input.

<script>
	import { Checkbox } from 'lithesome';

	let checked = $state(false);
</script>

<form action="?/update" method="POST">
	<Checkbox bind:checked />

	<input type="checkbox" hidden bind:checked />

	<button type="submit">Submit</button>
</form>