Kern 0.12.0 GitHub
Forms

<kern-input>

Labelled text field (text, password, search, number …), form-associated. Use mono for IP, MAC, CIDR and IDs.

suggestions turns it into a combobox: typing shows the suggestions that contain the text (case-insensitive) in a list below the field, free text stays allowed. Arrow keys open the list and move, Enter or a click takes a suggestion, Escape and Tab close it. Taking one sets value and emits kernInput and kernChange like typing. Only for type text, search, email, url and tel.

Native checks (required, type="email"/url, pattern, min/max/step, maxlength) reach the form: an invalid value blocks submitting. Like :user-invalid, the browser's message is shown only after the value was changed or a submit failed. error takes priority.

Enter submits the surrounding form like a native field (with an open suggestion list it only takes the suggestion); no-implicit-submit turns that off.

Examples

Basic field

A labelled text field with hint, placeholder and required. Use mono for IP addresses, MAC addresses and IDs, and size="sm" in toolbars and tables.

<div style="display:grid;gap:16px;max-width:360px"> <kern-input label="Device name" value="Kitchen Light" hint="Shown in the device list" required></kern-input> <kern-input label="MQTT server" value="192.168.1.5:1883" mono></kern-input> <kern-input size="sm" type="search" placeholder="Name, IP or MAC" aria-label-text="Search devices"></kern-input> </div>

Error, disabled and read-only

error shows a message and marks the field invalid, so it also blocks form submission. disabled fields are skipped by the form; readonly fields are submitted but cannot be edited.

<div style="display:grid;gap:16px;max-width:360px"> <kern-input label="Device password" type="password" value="secret" error="Wrong credentials"></kern-input> <kern-input label="Firmware" value="1.4.2-gf2c8e7a" mono readonly></kern-input> <kern-input label="Cloud token" value="Managed by the cloud" disabled></kern-input> <kern-input label="Auto-off" type="number" value="15" min="0" max="120" step="5" hint="Minutes, 0–120"></kern-input> </div>

Complete form

All Kern form fields are form-associated: they take part in a native <form>, in FormData, in validation and in reset. kern-button type="submit" and type="reset" work like native buttons. Leave a required field empty or enter a short password to see the validation; Reset restores the initial values.

Cloud
Reset Save
<form style="display:grid;gap:16px;max-width:400px"> <kern-input name="name" label="Device name" value="Bathroom Fan" required></kern-input> <kern-ip-input name="ip" label="Static IP" allow="single" value="192.168.1.21" required></kern-ip-input> <kern-input name="password" label="Device password" type="password" hint="At least 8 characters"></kern-input> <kern-select name="room" label="Room" placeholder="Choose a room" required> <option value="bath">Bathroom</option> <option value="kitchen">Kitchen</option> <option value="garage">Garage</option> </kern-select> <kern-switch name="cloud" checked>Cloud</kern-switch> <div style="display:flex;gap:8px;justify-content:flex-end"> <kern-button type="reset" variant="ghost">Reset</kern-button> <kern-button type="submit" variant="primary">Save</kern-button> </div> <output style="font:12px var(--font-mono);color:var(--text-muted);white-space:pre"></output> </form> const form = root.querySelector('form'); const password = root.querySelector('[name="password"]'); const out = root.querySelector('output'); password.addEventListener('kernChange', (e) => { const v = e.detail.value; password.error = v && v.length < 8 ? 'Too short' : undefined; }); form.addEventListener('submit', (e) => { e.preventDefault(); out.textContent = [...new FormData(form)].map(([k, v]) => `${k} = ${v}`).join('\n'); }); form.addEventListener('reset', () => { password.error = undefined; out.textContent = ''; });

Suggestions

suggestions offers known values while typing and still allows free text, like a native <datalist> but in the Kern style. It takes an array or a comma-separated string. The list shows the suggestions that contain the typed text (case-insensitive, match highlighted); Arrow keys open it and move, Enter or a click takes a suggestion, Escape and Tab close it. Taking one sets value and emits kernInput and kernChange like typing. Works with type text, search, email, url and tel.

In Angular, bind an array: <kern-input label="Location" [suggestions]="knownLocations" [(ngModel)]="location"></kern-input>.

<div style="display:grid;gap:16px;max-width:360px"> <kern-input label="Floor" suggestions="Ground floor, First floor, Second floor, Basement, Attic" hint="Pick a known floor or type a new one"></kern-input> <kern-input label="Room" size="sm" suggestions="Kitchen, Living room, Bedroom, Bathroom, Office, Garage" placeholder="e.g. Kitchen"></kern-input> </div>

Properties

ariaLabelTextattribute aria-label-text
string | undefined

Accessible name when there is no visible label.

autocomplete
string | undefined
disabledreflectsdefault false
boolean
error
string | undefined

Error text; also marks the field invalid.

hint
string | undefined
label
string | undefined
max
number | string | undefined
maxlength
number | undefined
min
number | string | undefined

For type="number".

monoreflectsdefault false
boolean
name
string | undefined
noImplicitSubmitattribute no-implicit-submit · default false
boolean

Enter does not submit the surrounding form.

pattern
string | undefined
placeholder
string | undefined
readonlydefault false
boolean
requireddefault false
boolean
sizereflectsdefault 'md'
"md" | "sm"
step
number | string | undefined
suggestions
string | string[] | undefined

Values offered while typing; free text stays allowed. A string is split at commas.

typedefault 'text'
"email" | "number" | "password" | "search" | "tel" | "text" | "url"
valuemutabledefault ''
string

Events

kernChange
CustomEvent<{ value: string; }>

On every keystroke and when a suggestion is taken (also used by the Angular value accessor).

kernInput
CustomEvent<{ value: string; }>

On every keystroke and when a suggestion is taken.

Methods

select()
select() => Promise<void>

Selects the text.

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

Focuses the native input.

CSS parts

control

The native input

listbox

The suggestion list

option

Each suggestion