Forms

`<kern-mac-input>`

MAC address field, form-associated. Accepts every common notation (C82B961A3F00, c8:2b:…, c8-2b-…, c82b.961a.3f00) and normalises on Enter or when leaving the field to format and letter-case; value and the form value are the normalised form.

Examples

Any notation in, one notation out

Accepts C82B961A3F00, c8:2b:…, c8-2b-… or c82b.961a.3f00 and normalises on Enter or when leaving the field. format (colon, dash, dot, plain) and letter-case set the output.

kernChange → …

<div style="display:grid;gap:16px;max-width:360px"> <kern-mac-input label="MAC address" value="c82b961a3f00" hint="Any notation, e.g. c82b.961a.3f00"></kern-mac-input> <kern-mac-input label="MAC (dash, lower case)" value="C8:2B:96:1A:3F:00" format="dash" letter-case="lower"></kern-mac-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-mac-input')) { el.addEventListener('kernChange', (e) => (out.textContent = 'kernChange → ' + e.detail.value)); }

Required, read-only and small

required blocks an empty form submission; readonly and disabled work as on kern-input.

Properties

ariaLabelTextattribute aria-label-text

string | undefined

Accessible name when there is no visible label.

disabled

reflects

default false

boolean

error

string | undefined

formatdefault 'colon'

"colon" | "dash" | "dot" | "plain"

Notation of value: C8:2B:… (colon), C8-2B-… (dash), c82b.961a.3f00 (dot), C82B961A3F00 (plain).

hint

string | undefined

label

string | undefined

labelInvalidattribute label-invalid · default Not a valid MAC address · de Keine gültige MAC-Adresse

string | undefined

letterCaseattribute letter-case · default 'upper'

"lower" | "upper"

name

string | undefined

noImplicitSubmitattribute no-implicit-submit · default false

boolean

Enter does not submit the surrounding form.

placeholder

string | undefined

Defaults to an example in format.

readonlydefault false

boolean

requireddefault false

boolean

size

reflects

default 'md'

"md" | "sm"

value

mutable

default ''

string

Normalised MAC address; empty when none.

Events

kernChange

CustomEvent<{ value: string; }>

When typed text is applied, with the normalised value (empty when cleared).

kernInput

CustomEvent<{ value: string; }>

On every keystroke, with the raw text.

Methods

setFocus()

setFocus() => Promise<void>

Focuses the native input.

CSS parts

control