CwSwitch

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

Basic

State: On

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

Variants

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

  1. Bind `checked` for state ownership If the page needs to read or update the value, `bind:checked` is the simplest pattern.
  2. Use label and description to explain the effect Good switch labels describe the setting itself; the optional description explains the consequence.
  3. 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.

APITypeDetails
checked

Default: false

booleanCurrent on or off state.
label
stringPrimary switch 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`, `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.

Bound settings switch Copy code 
<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.

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