Forms
<kern-segmented>Compact single choice for 2–5 short options (filters, Stable/Beta, DHCP/Statisch), form-associated. Options from the options property or child <option> elements. Arrow keys move the selection.
Examples Properties Events Slots CSS parts
Examples
Segmented choice
For 2–5 short options such as filters or Stable/Beta. Options come from child <option> elements; arrow keys move the selection. label is the group's accessible name.
All
Active
Missing
Stable
Beta
kernChange → …
<div style="display:grid;gap:16px;justify-items:start">
<kern-segmented label="Status" value="all">
<option value="all">All</option>
<option value="active">Active</option>
<option value="missing">Missing</option>
</kern-segmented>
<kern-segmented name="channel" label="Update channel" value="stable" disabled>
<option value="stable">Stable</option>
<option value="beta">Beta</option>
</kern-segmented>
<output style="font:12px var(--font-mono);color:var(--text-muted)">kernChange → …</output>
</div>
root.querySelector('kern-segmented').addEventListener('kernChange', (e) => {
root.querySelector('output').textContent = 'kernChange → ' + e.detail.value;
});
Options property
Set options ({ value, label, disabled? }[]) from script instead of child elements.
<kern-segmented label="Chart period" value="24h"></kern-segmented>
root.querySelector('kern-segmented').options = [
{ value: '1h', label: '1 h' },
{ value: '24h', label: '24 h' },
{ value: '7d', label: '7 days' },
{ value: '30d', label: '30 days', disabled: true },
];
Properties
disabledreflects default false
boolean
label
string | undefined
Accessible name of the group.
options
KernOption[] | undefined
valuemutable default ''
string
Events
kernChange
CustomEvent<{ value: string; }>
Slots
(default)
<option> elements (read, not shown)
CSS parts
segment
Each option button