Kern 0.12.0 GitHub
Forms

<kern-rating>

Star rating 1–max, form-associated (value 0 = not rated). A radio group with one tab stop: arrow keys change the rating, Home/End jump, with clearable 0/Backspace or a click on the current star clears it. Hovering previews. readonly only shows the rating („4 von 5 Sternen“).

Examples

Star rating

A radio group with one tab stop: arrow keys change the rating, Home/End jump. With clearable, 0, Backspace or a click on the current star clears it (value 0 = not rated). Hovering previews.

kernChange → …
<div style="display:grid;gap:16px"> <kern-rating name="score" label="Reliability" value="4" clearable hint="How stable does the device run?"></kern-rating> <kern-rating label="Signal" max="3" value="2" size="sm" label-value="{n} of {max}"></kern-rating> <output style="font:12px var(--font-mono);color:var(--text-muted)">kernChange → …</output> </div> root.querySelector('kern-rating').addEventListener('kernChange', (e) => { root.querySelector('output').textContent = 'kernChange → ' + e.detail.value; });

Read-only and required

readonly only shows the rating, e.g. in a card or table. required blocks submitting while the value is 0; disabled stops interaction.

<div style="display:grid;gap:16px"> <kern-rating value="5" readonly size="sm" aria-label-text="Rating"></kern-rating> <kern-rating label="Rate this update" required error="Please rate the update"></kern-rating> <kern-rating label="Rating" value="3" disabled></kern-rating> </div>

Properties

ariaLabelTextattribute aria-label-text
string | undefined

Accessible name when there is no visible label.

clearabledefault false
boolean

Allows going back to 0 (not rated).

disabledreflectsdefault false
boolean
error
string | undefined
hint
string | undefined
label
string | undefined
labelValueattribute label-value · default {n} of {max} stars · de {n} von {max} Sternen
string | undefined

Name of each star and the read-only rating; {n} and {max} are replaced.

maxdefault 5
number

Number of stars.

name
string | undefined
readonlyreflectsdefault false
boolean

Display only, no interaction.

requireddefault false
boolean
sizereflectsdefault 'md'
"md" | "sm"
valuemutabledefault 0
number

Number of filled stars, 0 = not rated.

Events

kernChange
CustomEvent<{ value: number; }>

When the rating changes.

Methods

setFocus()
setFocus() => Promise<void>

Focuses the selected star (or the first).

CSS parts

star

Each star