Forms

`<kern-switch>`

On/off switch for settings (Cloud, Bluetooth, MQTT), form-associated. The label names the thing ("Cloud"), not the action.

Examples

Settings switches

The slotted text names the setting ("Cloud"), not the action. Space toggles; the form gets value (default on) under name only while checked.

Cloud

Bluetooth

MQTT (managed by Home Assistant)

kernChange → …

<div style="display:grid;gap:12px"> <kern-switch name="cloud" checked>Cloud</kern-switch> <kern-switch name="ble">Bluetooth</kern-switch> <kern-switch name="mqtt" checked disabled>MQTT (managed by Home Assistant)</kern-switch> <output style="font:12px var(--font-mono);color:var(--text-muted)">kernChange → …</output> </div>

const out = root.querySelector('output'); for (const el of root.querySelectorAll('kern-switch')) { el.addEventListener('kernChange', (e) => (out.textContent = `kernChange → ${el.name}: ${e.detail.checked}`)); }

Without visible text

In tables, give the switch an accessible name with label instead of slotted text.

Kitchen Light

<div style="display:flex;gap:12px;align-items:center"> <span>Kitchen Light</span> <kern-switch label="Kitchen Light on" checked></kern-switch> </div>

Properties

checked

mutable

reflects

default false

boolean

disabled

reflects

default false

boolean

label

string | undefined

Accessible name when there is no visible text.

name

string | undefined

valuedefault 'on'

string

Form value when checked.

Events

kernChange

CustomEvent<{ checked: boolean; }>

Slots

(default)

Label text

CSS parts

track

The switch track