CwCheckbox

Checkbox control for independent yes/no selections. It uses a real checkbox input, explicit form name support, and the same light/dark theme tokens as the rest of CWUI.

Basic

Keep stale or disconnected devices in the table.

State: Checked

CwCheckbox example Copy code 
<script lang="ts">
	import { CwCheckbox } from '@cropwatchdevelopment/cwui';

	let includeOffline = $state(true);
</script>

<CwCheckbox
	name="includeOffline"
	label="Include offline devices"
	description="Keep stale or disconnected devices in the table."
	bind:checked={includeOffline}
/>

Stacked options

Include active alert rows in the report export.
Attach operator notes to each exported record.
Disabled example for unavailable export add-ons.

Indeterminate "select all"

Mixed state shows a dash when only some sensors are selected.
Indeterminate checkbox Copy code 
<CwCheckbox
	label="All sensors"
	checked={allChecked}
	indeterminate={someChecked}
	onchange={(checked) => toggleAll(checked)}
/>

Required with error

Confirm before saving the calibration

Compact row

Enabled: Email

API

Usage and API reference

CwCheckbox is the library checkbox for independent yes or no selections. Use one checkbox per independent option, and rely on `name`, `value`, and `checked` when the control needs to participate in native form submission.

How to think about it

  1. Bind `checked` when the page owns the state For interactive settings and filters, `bind:checked` is the simplest way to keep checkbox state in sync with the page.
  2. Set `name` explicitly for form submission When the checkbox is part of a real form, give it a `name` so the browser includes it in the submitted fields.
  3. Use helper text for consequences, not labels The label should name the option itself. Use `description` only when users need extra context about what checking it will do.

Props and callbacks

This component wraps a real checkbox input, so native form behavior and browser validation still apply.

APITypeDetails
checked

Default: false

booleanCurrent checked state.
label
stringPrimary checkbox text.
description
stringSecondary explanatory text.
id
stringOptional explicit input id.
name
stringForm field name forwarded to the real checkbox input.
oninput
(checked: boolean, event: Event) => voidRuns whenever the checkbox input event fires.
onchange
(checked: boolean, event: Event) => voidRuns when the checkbox change event fires.
...other native checkbox attrs
HTMLInputAttributesPass `value`, `disabled`, `required`, `aria-*`, and standard checkbox attributes through to the real input.
error
stringError message under the field. Sets `aria-invalid` and links the text with `aria-describedby`.
indeterminate

Default: false

booleanBindable mixed state, shown as a dash. Use for "select all" rows.

Copy-paste examples

Each snippet is a complete, working example you can paste into a Svelte 5 component.

Bound checkbox field

This is the normal pattern for filters, export toggles, and settings forms.

Bound checkbox field Copy code 
<script lang="ts">
	let includeOffline = $state(true);
</script>

<CwCheckbox
	name="includeOffline"
	label="Include offline devices"
	description="Keep stale or disconnected devices in the table."
	bind:checked={includeOffline}
/>
Immediate side effects on selection

Use callbacks when checking the box should trigger follow-up work immediately.

Immediate side effects on selection Copy code 
<CwCheckbox
	name="emailDigest"
	label="Email digest"
	oninput={(checked) => console.log('input', checked)}
	onchange={(checked) => savePreference('emailDigest', checked)}
/>