Kern 0.12.0 GitHub
Forms

<kern-textarea>

Labelled multi-line text field, form-associated. For notes and scripts.

Examples

Notes and scripts

A multi-line field with rows, maxlength and hint. mono suits scripts and configuration snippets.

<div style="display:grid;gap:16px;max-width:480px"> <kern-textarea label="Notes" placeholder="Where is the device mounted?" maxlength="500" hint="Up to 500 characters"></kern-textarea> <kern-textarea label="Script" rows="6" mono value="Shelly.call('Switch.Set', { id: 0, on: true });"></kern-textarea> </div>

Error, read-only and disabled

error marks the field invalid; required blocks an empty form submission.

<div style="display:grid;gap:16px;max-width:480px"> <kern-textarea label="Reason for factory reset" required rows="3" error="Please give a reason"></kern-textarea> <kern-textarea label="Last log line" rows="2" mono readonly value="[12:04:31] wifi: connected to Home (-61 dBm)"></kern-textarea> <kern-textarea label="Comment" rows="2" disabled value="Locked while the update runs"></kern-textarea> </div>

Properties

ariaLabelTextattribute aria-label-text
string | undefined
disabledreflectsdefault false
boolean
error
string | undefined
hint
string | undefined
label
string | undefined
maxlength
number | undefined
monoreflectsdefault false
boolean
name
string | undefined
placeholder
string | undefined
readonlydefault false
boolean
requireddefault false
boolean
rowsdefault 4
number
valuemutabledefault ''
string

Events

kernChange
CustomEvent<{ value: string; }>
kernInput
CustomEvent<{ value: string; }>

Methods

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

CSS parts

control

The native textarea