Checkbox

Accessible checkbox: role="checkbox" with aria-checked (true | false | "mixed" for indeterminate).

Native <button> handles Space/Enter.

Forms · two-way: bind:checked · submits in a form with name · keyboard contract

<script lang="ts">
	import { Checkbox } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
checked bind:	boolean | 'indeterminate'	false	'indeterminate' renders the dash and counts as unchecked when submitted.
disabled	boolean	false	Blocks interaction and drops it out of the form data.
class	string	—	Merged with the component's own classes, last — so yours win.
name	string	—	Submits with the form under this name when checked, like a native box.
value	string	'on'	The submitted value. Native checkboxes default to "on".
onCheckedChange	(checked: boolean) => void	—	Fires with the new state on every toggle.

Everything not listed above is spread onto the underlying element (HTMLButtonAttributes): aria-*, data-*, event handlers, and the rest of the native attributes.

Keyboard

Key	Does
Enter / Space	toggle

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<Label for="{uid}-agree">
	<Checkbox id="{uid}-agree" bind:checked={agreed} />
	Include hidden files
</Label>

Forms · Field · Input · FileInput · FileList · Textarea · CodeEditor · Combobox · RadioGroup · NumberInput · InlineEdit · Label · Select · MultiSelect · DatePicker · TagsInput · Switch · Slider

---

← All components · Getting started · Theming · source