Components · Checkbox · Use

Checkbox

Checked, mixed, invalid, and disabled are runtime states, so Checkbox has no build-time configuration axis.

Include component utilities

State

Markup

<script lang="ts">
	import { Checkbox } from '@ark-ui/svelte';
	import CheckIcon from '@lucide/svelte/icons/check';
</script>

<Checkbox.Root defaultChecked class="checkbox-root">
	<Checkbox.Control class="checkbox-control">
		<Checkbox.Indicator class="checkbox-indicator"><CheckIcon /></Checkbox.Indicator>
	</Checkbox.Control>
	<Checkbox.Label class="checkbox-label">Include component utilities</Checkbox.Label>
	<Checkbox.HiddenInput />
</Checkbox.Root>