Component · Inputs & Controls · v2.0

Forms that feel like code

16 CONTROL TYPES · 6 STATES · FULLY WIRED
WCAG AA · KEYBOARD ✓ · LIVE VALIDATION
FOCUS · ERROR · SUCCESS · WARN · DISABLED · LOADING
01TEXT · 6 STATES · LIVE
Default · Focus · Filled · Error · Success · Disabled
Empty default · placeholder #5C6473
Click any input · lime ring appears live
Filled · resting · no glow
Type any email · validation fires on blur
Verified · SPF + DKIM passing
Disabled · 45% opacity · no events
02VARIANTS · prefix · suffix · search · password · area
composition recipes
🇺🇸 +1
$USD / MO
SHOW
238 / 500 chars · live countvars: 0 · use {first_name} {company} {timeslot}
03NUMERIC · DATE · TIME · structured types
native input types · constrained
CALLS/DAY
04SELECT · live dropdown · multi · combo
click to open · keyboard ↑↓ ↵
Select region…
★  Mo · Pro / EN-US
SALES ×EU-WEST ×
Type + Enter to add · backspace removes last
05CHECK · RADIO · SWITCH · live toggles
always paired with a label
CHECKBOX · multi-select
RADIO · single-select
SWITCH · binary on/off
06SCALAR · slider · stepper · segmented
drag · click · type
62/min
10 /min100 /min
8
/ 32 MAX
More lines · faster · higher cost
Auto: Mo runs end-to-end
07OTP · FILE DROP · COLOR · specialty inputs
advanced patterns
Type · auto-advance · ⌫ retreats · paste auto-fills
Drop CSV here or click to browse
CSV · max 10MB · 50K rows
#12FFA0
Click any swatch · live updates
08FILTER BAR · multi-select pills
click to toggle
FILTER BY · 2 ACTIVE ACTIVE CONVERTED QUEUED PAUSED FAILED MISSED CLEAR ALL ✕
09COMPOSITION · real form in production
all controls together · validate · submit
New campaign — outbound
STEP 2 OF 4 · DETAILS
★  Sarah Chen
🇺🇸 +1
CALLS/DAY
5 fields · all valid
10OPINIONATED RULES · enforced
how MobDial writes forms
1

Label always above

Every field has a mono uppercase label sitting 6px above. Placeholders hint example input, never replace the field's purpose. aria-label mirrors the visible label.

2

Validate on blur

Don't error-color on every keystroke — it's hostile. Red on blur after the user leaves. Async success only after a verified roundtrip (DNS / lookup / verification).

3

Help text is the contract

Below every field is one help line — example, constraint, or unit. No help text means label + placeholder cover everything. Never let users guess.

4

Keyboard always works

Every control is reachable by Tab. Switches respond to Space, selects open with Enter, sliders take ← →. ⌘K focuses global search.

5

Loading is a state

Async fields show a warn (yellow) ring while pending — never "no feedback". OTP fields highlight as they fill. File uploads show progress bars per file.

6

Errors are specific

"Required" is lazy. Use "Phone must be 10 digits" or "Use a domain you own — try acme.com". Errors include the fix, not just the failure.

11TOKEN REFERENCE
--input-* · component scope
BGdefault#06080F
BGfocus#080B14
BORDERdefault#232A38
BORDERhover#3A4150
★ RADIUSinput6px
RADIUSseg/btn8px
HEIGHTdefault44px
HEIGHTarea96px min
HEIGHTOTP54×46px
PAD-Xdefault14px
PAD-Ydefault10px
TEXTbodyDM Sans 13.5px
PLACEHOLDERcolor#5C6473
LABELfontJetBrains 9.5px
★ FOCUS RINGhalo3px lime/.18
ERRORborder#FF3B5C
SUCCESSborderlime/.5
WARNborder#FFD60A
SWITCHon#12FFA0
CHECKon#12FFA0
SLIDERfilllime → cyan
SEGactive#12FFA0
TRANSfocus150ms ease
WCAGcontrastAAA · 4.6:1
✓ FORM SAVEDAll 5 fields validated