CropWatch User Interface

CwSwitch

Checkbox-based on/off control with native form attributes and bindable checked state.

Basic

Show only online devices Hide offline sensors from the dashboard

State: On

<CwSwitch
	label="Show only online devices"
	description="Hide offline sensors from the dashboard"
	name="onlineOnly"
	value="yes"
	bind:checked={onlineOnly}
/>

Variants

Email notifications

SMS notifications

Disabled switch

Label positions

Top label Choose the control layout that fits the surface.

Bottom label Choose the control layout that fits the surface.

Left label Choose the control layout that fits the surface.

Right label Choose the control layout that fits the surface.

<CwSwitch label="Top label" labelPosition="top" />
<CwSwitch label="Bottom label" labelPosition="bottom" />
<CwSwitch label="Left label" labelPosition="left" />
<CwSwitch label="Right label" labelPosition="right" />

Documentation Upgrade

Start here

CwSwitch is a checkbox-based on/off control. Treat it as a boolean field with optional helper text, then use `oninput` or `onchange` only when the parent needs side effects.

How to think about it

Bind `checked` for state ownership If the page needs to read or update the value, `bind:checked` is the simplest pattern.
Use label and description to explain the effect Good switch labels describe the setting itself; the optional description explains the consequence.
Pick the callback based on timing `oninput` fires as the control changes, while `onchange` matches the more familiar committed change event.

Props and callbacks

This component wraps a real checkbox input, so standard form attributes are still available.

API	Type	Details
`checked` Default: `false`	`boolean`	Current on or off state.
`label`	`string`	Primary switch text.
`description`	`string`	Secondary explanatory text.
`labelPosition` Default: `'right'`	`'top' \| 'bottom' \| 'left' \| 'right'`	Places the label block on a specific side of the switch control.
`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`, `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 settings switch

This is the normal settings-page usage.

<script lang="ts">
	let onlineOnly = $state(true);
</script>

<CwSwitch
	label="Show only online devices"
	description="Hide offline sensors from the dashboard"
	name="onlineOnly"
	bind:checked={onlineOnly}
/>

Input and change callbacks

Use callbacks when turning the switch should trigger side effects immediately.

<CwSwitch
	id="sms-alerts"
	label="SMS alerts"
	oninput={(checked) => console.log('input', checked)}
	onchange={(checked) => savePreference('smsAlerts', checked)}
/>

Move the label around the control

Use `labelPosition` when the surrounding layout needs the text above, below, or to the left of the switch.

<CwSwitch label="Top label" labelPosition="top" />
<CwSwitch label="Bottom label" labelPosition="bottom" />
<CwSwitch label="Left label" labelPosition="left" />
<CwSwitch label="Right label" labelPosition="right" />