Forms

`<kern-ip-input>`

IPv4 field for a single address (192.168.1.10), a range (192.168.1.10-192.168.1.50, also 192.168.1.10-50), a CIDR block (192.168.1.0/24) or a subnet mask (255.255.255.0, also /24), form-associated. Typed text is applied on Enter or when leaving the field and normalised; value and the form value are the normalised form. Ranges, blocks and masks show their size in the field.

Examples

Address, range or CIDR

One field accepts a single address, a range (192.168.1.10-50) or a CIDR block. Typed text is applied and normalised on Enter or when leaving the field; ranges and blocks show their size. max-addresses limits the size, locale formats the count.

kernChange → …

<div style="display:grid;gap:16px;max-width:360px"> <kern-ip-input label="Scan range" value="192.168.1.0/24" max-addresses="1024" hint="Address, range or CIDR, max. 1024 addresses" locale="en"></kern-ip-input> <output style="font:12px var(--font-mono);color:var(--text-muted)">kernChange → …</output> </div>

root.querySelector('kern-ip-input').addEventListener('kernChange', (e) => { root.querySelector('output').textContent = 'kernChange → ' + JSON.stringify(e.detail); });

Single address only

allow="single" accepts only one address (also range, cidr or a space-separated combination); other forms show label-not-allowed. Also shown: required, readonly, disabled and size="sm".

Subnet mask

allow="mask" accepts only contiguous subnet masks; 255.0.255.0 or an address like 192.168.1.1 shows label-invalid-mask. A prefix (/22 or 22) is normalised to the dotted mask, or the other way round with mask-format="prefix". The field shows the prefix and the number of usable hosts (label-mask-count); kernChange reports kind: 'mask', mask, prefix and hosts. With allow="single mask", a valid mask counts as mask and anything else as address.

kernChange → …

<div style="display:grid;gap:16px;max-width:360px"> <kern-ip-input label="Netmask" allow="mask" value="255.255.255.0" required hint="Dotted mask or prefix, e.g. /22" locale="en"></kern-ip-input> <kern-ip-input label="Prefix" allow="mask" mask-format="prefix" value="/16" locale="en"></kern-ip-input> <output style="font:12px var(--font-mono);color:var(--text-muted)">kernChange → …</output> </div>

root.querySelectorAll('kern-ip-input').forEach((el) => el.addEventListener('kernChange', (e) => { root.querySelector('output').textContent = 'kernChange → ' + JSON.stringify(e.detail); }), );

Properties

allowdefault 'single range cidr'

string

Allowed forms, space-separated: single, range, cidr, mask. mask accepts only contiguous subnet masks (255.255.252.0) and prefixes (/22, 22); combined with single, a valid mask counts as mask and anything else as address.

ariaLabelTextattribute aria-label-text

string | undefined

Accessible name when there is no visible label.

disabled

reflects

default false

boolean

error

string | undefined

hideCountattribute hide-count · default false

boolean

Hide the number of addresses in the field.

hint

string | undefined

label

string | undefined

labelCountattribute label-count · default {n} addresses · de {n} Adressen

string | undefined

Size of a range or block; {n} is replaced by the number.

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

string | undefined

Shown for text that is no IPv4 address, range or CIDR block.

labelInvalidMaskattribute label-invalid-mask · default Not a valid subnet mask · de Keine gültige Subnetzmaske

string | undefined

Shown for text that is no subnet mask when only mask is allowed.

labelMaskCountattribute label-mask-count · default /{prefix} · {n} hosts · de /{prefix} · {n} Hosts

string | undefined

Size of a mask; {prefix} is replaced by the prefix length, {n} by the number of hosts.

labelNotAllowedattribute label-not-allowed · default This form is not allowed here · de Diese Form ist hier nicht erlaubt

string | undefined

Shown for a form excluded by allow.

labelTooManyattribute label-too-many · default At most {n} addresses · de Höchstens {n} Adressen

string | undefined

Shown above max-addresses; {n} is replaced by it.

locale

string | undefined

BCP 47 locale for the number of addresses; defaults to <html lang>, then the browser language.

maskFormatattribute mask-format · default 'dotted'

"dotted" | "prefix"

How a mask is normalised: dotted (255.255.255.0) or prefix (/24).

maxAddressesattribute max-addresses

number | undefined

Largest allowed number of addresses.

name

string | undefined

noImplicitSubmitattribute no-implicit-submit · default false

boolean

Enter does not submit the surrounding form.

placeholder

string | undefined

Defaults to an example of the first allowed form.

readonlydefault false

boolean

requireddefault false

boolean

size

reflects

default 'md'

"md" | "sm"

value

mutable

default ''

string

Normalised address, range, CIDR block or mask; empty when none.

Events

kernChange

CustomEvent<{ value: string; kind?: KernIpKind | "mask" | undefined; first?: string | undefined; last?: string | undefined; count?: number | undefined; mask?: string | undefined; prefix?: number | undefined; hosts?: number | undefined; }>

When typed text is applied: the normalised value and what it covers (empty value 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