Checkbox - Lithesome

Preview

Code

<script lang="ts">
	import { CheckIcon } from '@lucide/svelte';
	import { CheckboxButton, CheckboxGroup, CheckboxLabel } from 'lithesome';
</script>

<CheckboxGroup class="flex items-center gap-3">
	<CheckboxButton
		class={({ checked }) => [
			'flex size-8 cursor-pointer border',
			checked ? 'border-teal-500 bg-teal-500' : ['border-zinc-400', 'border:border-zinc-800']
		]}
	>
		{#snippet children({ checked })}
			{#if checked}
				<CheckIcon class="m-auto size-5 text-black" />
			{/if}
		{/snippet}
	</CheckboxButton>
	<CheckboxLabel class="cursor-pointer select-none">I agree to sell my data 👍</CheckboxLabel>
</CheckboxGroup>

Basic Example

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

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

<Checkbox bind:checked>
	{#if checked}
		Check Icon
	{:else}
		Nothing
	{/if}
</Checkbox>

API Reference

<CheckboxGroup />

Property	Type	Description
`checked`	CheckboxChecked	The current checked state.
`disabled`	boolean	Disables the entire group, stops all events from firing.
`onCheckedChange`	(checked: CheckboxChecked) => void	Fires whenever the `checked` prop is changed.
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`checked`	CheckboxChecked	True if the button is checked.
`disabled`	boolean	True if the group is disabled.

<CheckboxButton />

Property	Type	Description
`checked`	CheckboxChecked	The current checked state.
`disabled`	boolean	Disables the entire group, stops all events from firing.
`name`	string	Renders an invisible `input[type="checkbox"]` element to be used for native form submissions. If no `value` prop is found, the default value is 'on'
`required`	boolean	Makes the invisible checkbox required.
`value`	string	The value of the invisible checkbox.
`onCheckedChange`	(v: CheckboxChecked) => void	Fires whenever the `checked` prop is changed.
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`checked`	CheckboxChecked	True if the button is checked.
`disabled`	boolean	True if the group is disabled.

<CheckboxLabel />

Property	Type	Description
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`checked`	CheckboxChecked	True if the button is checked.
`disabled`	boolean	True if the group is disabled.