Forms

`<kern-checkbox>`

Checkbox for selection and filters ("nur mit Firmware-Update", device selection), form-associated.

Examples

Checkboxes and filters

Slotted text is the label; Space toggles. disabled boxes cannot be changed and are left out of the form.

Only with firmware update

Show offline devices

Include Gen 1 devices (not supported)

<div style="display:grid;gap:12px"> <kern-checkbox checked>Only with firmware update</kern-checkbox> <kern-checkbox>Show offline devices</kern-checkbox> <kern-checkbox checked disabled>Include Gen 1 devices (not supported)</kern-checkbox> </div>

Select all with indeterminate

indeterminate shows the mixed state, e.g. when some devices are selected; it is cleared on user input. Without visible text, set label as the accessible name.

All devices

Kitchen Light

Bathroom Fan

Garage Door

<div style="display:grid;gap:8px"> <kern-checkbox class="all">All devices</kern-checkbox> <div style="display:grid;gap:8px;padding-left:24px"> <kern-checkbox class="one" name="device" value="kitchen" checked>Kitchen Light</kern-checkbox> <kern-checkbox class="one" name="device" value="fan">Bathroom Fan</kern-checkbox> <kern-checkbox class="one" name="device" value="garage">Garage Door</kern-checkbox> </div> </div>

const all = root.querySelector('.all'); const items = [...root.querySelectorAll('.one')]; const sync = () => { const n = items.filter((i) => i.checked).length; all.checked = n === items.length; all.indeterminate = n > 0 && n < items.length; }; all.addEventListener('kernChange', (e) => items.forEach((i) => (i.checked = e.detail.checked))); items.forEach((i) => i.addEventListener('kernChange', sync)); sync();

Properties

checked

mutable

reflects

default false

boolean

disabled

reflects

default false

boolean

indeterminate

mutable

reflects

default false

boolean

Mixed state, e.g. "some devices selected". Cleared on user input.

label

string | undefined

Accessible name when there is no visible text (e.g. row selection in a table).

name

string | undefined

valuedefault 'on'

string

Events

kernChange

CustomEvent<{ checked: boolean; }>

Slots

(default)

Label text

CSS parts

box

The visible box