GitHub

Live Demos

Click inside any field and use ← / → to navigate between segments, ↑ / ↓ to increment or decrement, and Backspace to clear. Green border = valid · Red border = invalid/incomplete.

Networking

e.g. 192.168.0.1 — four 0–255 octets
e.g. 00:1A:2B:3C:4D:5E — six hex bytes
e.g. 2001:0db8:85a3:0000:0000:8a2e:0370:7334 — eight 16-bit hex groups

Date & Time

e.g. 2024-03-15 — year · month · day
YYYY-MM-DD ⏱︎ — Tab to icon, then Enter or click to fill today's date · icon highlighted amber when focused
e.g. 2024-01-01 → 2024-12-31
YYYY-MM-DD ⏱︎ → YYYY-MM-DD ⏱︎ — independent "today" buttons for start and end
YYYY-MM-DD ✕ — click ✕ to reset to the default value
e.g. 14:30:00 — hours 0–23 · minutes 0–59 · seconds 0–59
e.g. 01:30:00 — hours (unbounded) · minutes · seconds

Colour

e.g. rgba(255, 128, 0, 1) — r · g · b ∈ [0,255], a ∈ [0,1]
e.g. hsla(180, 50%, 75%, 1) — hue 0–360°, saturation/lightness 0–100%, alpha 0–1

Identifiers

e.g. 550e8400-e29b-41d4-a716-446655440000 — five hex groups (8-4-4-4-12)
e.g. 2.14.3 — MAJOR · MINOR · PATCH

Payment

e.g. 4111 1111 1111 1111 — four groups of four digits
e.g. 12/28 — month 1–12 · two-digit year

Other

e.g. (555) 867-5309 — area code · exchange · subscriber
e.g. $19.99 — dollars · cents
e.g. €12.50 — symbol ($€£¥, ↑/↓ or type $) · dollars · cents
e.g. (6 + 4) / 2 — three operands · ↑/↓ adjusts each
e.g. 3 * 4 — operand · operator (↑/↓ or type +, -, *, /) · operand
Selectable action with options: ['🔓','🔒'] — ↑/↓ cycles icon, Enter/click fires handler
Selectable action with options: ['🔐 encrypt','🔑 decrypt']
First · Last — text segments, letters only
lat, long ◉ — decimal coordinates · click ◉ to use navigator.geolocation