Component

Check

Toggle options on or off.

Value: false

Installation

npx lomer-ui add checkbox

Or copy-paste the

Usage

Bind value property to reflect checkbox's value.

import Checkbox from '$lib/components/ui/checkbox.svelte'
let value = $state(false)
<Checkbox bind:value>Hit me!</Checkbox>
<p>Value: {value}</p>

Preview

Value: false

Examples

Content

<Checkbox>
	<p class="font-semibold">Terms & Conditions</p>
	<p class="text-zinc-600 dark:text-zinc-400">
		I Agree even without reading the terms and conditions.
	</p>
</Checkbox>

Preview

Loading

Add isLoading property.

<Checkbox isLoading>
	...
</Checkbox>

Preview

Disabled

Add isDisabled property.

<Checkbox isDisabled>
	...
</Checkbox>

Preview

Read only

Add isReadOnly property.

<Checkbox isReadOnly>
	...
</Checkbox>

Preview