Forms

`<kern-step-input>`

Number field with − and + buttons, form-associated. value is a number ('' when empty); typed text is applied on Enter or when leaving the field, limited to min/max and rounded to the decimals of step. Accepts the locale's decimal comma. Keyboard: Arrow Up/Down ± step, Page Up/Down ± 10 × step, Home/End = min/max; holding a button repeats.

Examples

Number with steps

value is a number, limited to min/max and rounded to the decimals of step; unit follows the number. The field accepts the locale's decimal comma. Keyboard: Arrow Up/Down ± step, Page Up/Down ± 10 × step, Home/End jump to min/max; holding a button repeats.

kernChange → …

<div style="display:grid;gap:16px;max-width:280px"> <kern-step-input label="Target temperature" value="21.5" min="5" max="30" step="0.5" unit="°C" locale="en"></kern-step-input> <kern-step-input label="Timeout" value="30" min="1" max="600" unit="s" size="sm" hint="1–600 seconds"></kern-step-input> <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-step-input')) { el.addEventListener('kernChange', (e) => (out.textContent = 'kernChange → ' + e.detail.value)); }

Locale, required and states

With locale="de-DE" the field shows and accepts a decimal comma (-0,25). required blocks an empty submission; readonly and disabled stop changes.

Properties

ariaLabelTextattribute aria-label-text

string | undefined

Accessible name when there is no visible label.

disabled

reflects

default false

boolean

error

string | undefined

hint

string | undefined

label

string | undefined

labelDecreaseattribute label-decrease · default Decrease · de Verringern

string | undefined

labelIncreaseattribute label-increase · default Increase · de Erhöhen

string | undefined

labelInvalidattribute label-invalid · default Not a valid number · de Keine gültige Zahl

string | undefined

Shown for text that is not a number.

locale

string | undefined

BCP 47 locale for the decimal separator; defaults to <html lang>, then the browser language.

max

number | undefined

min

number | undefined

name

string | undefined

noImplicitSubmitattribute no-implicit-submit · default false

boolean

Enter does not submit the surrounding form.

placeholder

string | undefined

readonlydefault false

boolean

requireddefault false

boolean

size

reflects

default 'md'

"md" | "sm"

stepdefault 1

number

Step for buttons and keys; its decimals set the precision (0.5 → one decimal).

unit

string | undefined

Unit after the number, e.g. „°C“, „%“, „s“.

value

mutable

default ''

"" | number

The number, or '' when empty.

Events

kernChange

CustomEvent<{ value: number | null; }>

When the number changes (null when emptied).

Methods

setFocus()

setFocus() => Promise<void>

Focuses the field.

CSS parts

control

The field box