CropWatch User Interface

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

Include offline devices Keep stale or disconnected devices in the table.

State: Checked

<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

Show alerts Include active alert rows in the report export.

Include notes Attach operator notes to each exported record.

Locked option Disabled example for unavailable export add-ons.

Compact Row

SMS alerts

Email digest

Push alerts

Enabled: Email

Documentation Upgrade

Start here

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

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.
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.
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.

API	Type	Details
`checked` Default: `false`	`boolean`	Current checked state.
`label`	`string`	Primary checkbox text.
`description`	`string`	Secondary explanatory text.
`id`	`string`	Optional explicit input id.
`name`	`string`	Form field name forwarded to the real checkbox input.
`oninput`	`(checked: boolean, event: Event) => void`	Runs whenever the checkbox input event fires.
`onchange`	`(checked: boolean, event: Event) => void`	Runs when the checkbox change event fires.
`...other native checkbox attrs`	`HTMLInputAttributes`	Pass `value`, `disabled`, `required`, `aria-*`, and standard checkbox attributes through to the real input.

Copy-paste examples

These snippets intentionally show the full public API surface the live demo relies on.

Bound checkbox field

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

<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.

<CwCheckbox
	name="emailDigest"
	label="Email digest"
	oninput={(checked) => console.log('input', checked)}
	onchange={(checked) => savePreference('emailDigest', checked)}
/>