Compact pill for an active filter, a selected value or a tag. removable adds a × button (one tab stop per chip); × or Delete/Backspace on it emits kernRemove. The chip does not remove itself: the app updates its state and moves the focus, e.g. with setFocus() to the next chip or back to the search field.
Examples
Tones and sizes
Chips show active filters, chosen values or tags as small pills. tone colours them like kern-badge; size="sm" fits dense rows and table cells. Use kern-badge for fixed properties and kern-status for device states.
removable adds a × button. Clicking it, or pressing Delete or Backspace while it has focus, emits kernRemove with value (the chip text when value is not set). The chip stays until the app removes it, and the app also decides where the focus goes next (setFocus() focuses the ×): here the next chip, else the previous one, else the button below. label-remove names the × for screen readers; {label} is replaced by the chip text.
Site: Haus SeeblickStatus: offlineSearch: kitchen
Restore filters
<div style="display:grid;gap:12px;justify-items:start">
<div class="chips" style="display:flex;flex-wrap:wrap;gap:8px" aria-label="Active filters" role="group">
<kern-chip removable tone="accent" value="site:Haus Seeblick">Site: Haus Seeblick</kern-chip>
<kern-chip removable tone="accent" value="status:offline">Status: offline</kern-chip>
<kern-chip removable tone="accent" value="search:kitchen" label-remove="Clear filter {label}">Search: kitchen</kern-chip>
</div>
<kern-button size="sm" variant="ghost">Restore filters</kern-button>
</div>
const group = root.querySelector('.chips');
const restore = root.querySelector('kern-button');
const initial = group.innerHTML;
group.addEventListener('kernRemove', (e) => {
const chip = e.target;
const next = chip.nextElementSibling ?? chip.previousElementSibling;
chip.remove();
// Focus the × of the neighbour, or a sensible fallback when the last chip is gone.
if (next) next.setFocus();
else restore.focus();
});
restore.addEventListener('click', () => (group.innerHTML = initial));
Properties
labelRemoveattribute label-remove · default Remove {label} · de {label} entfernen
string | undefined
Accessible name of the ×; {label} is replaced by the chip text.
removablereflectsdefault false
boolean
Shows a × button that emits kernRemove.
sizereflectsdefault 'md'
"md" | "sm"
tonereflectsdefault 'neutral'
"accent" | "danger" | "neutral" | "ok" | "warn"
value
string | undefined
Value sent with kernRemove; defaults to the chip text.
Events
kernRemove
CustomEvent<{ value: string; }>
× clicked or Delete/Backspace pressed on it.
Methods
setFocus()
setFocus() => Promise<void>
Focuses the × (removable chips only), e.g. the next chip after one was removed.