When: default for data-entry forms. Fastest scan, wraps & localizes cleanly.
Form controls · Lab
Field layouts
~30 ways to arrange a label, value, and control — proven patterns plus a few novel ones. Each notes when it wins. Scroll to the bottom for macro examples: the same fields composed four different ways.
A · Label position — the spectrum
The fundamental question: where does the label sit relative to the control?
Max riders this bus seats.
When: the field needs a hint or constraint up front.
Optional
When: mixed required/optional forms — mark the exceptions, not every field.
When: a per-field action belongs next to its label (reset, generate, help).
When: onboarding / few fields. Saves height; label rises on focus or fill.
When: same as 05 for pickers — label parks above once a value exists.
When: dense forms / panels where horizontal space is plentiful.
When: inline label but the control is tall (textarea, group).
When: single, obvious fields (search). Keep a real aria-label — placeholders aren't labels.
When: Material-style density; label and value share one block.
B · Compact panel rows — the studio context
Tight, always-editable rows for tools and filters. Every pixel of height counts.
Badge size26px
When: sliders — label + live value on one line, track below. (Today's studio.)
Base color
Gradient
When: stacks of pickers in a narrow panel; labels in a fixed left column.
When: paired values (offset X/Y, min/max, W×H) read as one unit.
When: an icon disambiguates faster than a word in cramped tools.
Align
When: 2–4 mutually-exclusive choices — no dropdown needed.
C · Settings & edit-in-place — review, then change
Read-optimized: show the current value; reveal a control only when editing.
RouteRoute 12
When: the canonical settings row. Scans as "attribute → value."
Emailava@smarttag.io
When: longer values that shouldn't share a line with the label.
Capacity48 riders
Capacity
When: edit happens in context — no page/modal jump. (Try it.)
When: the editor is bigger than one field; keep the list calm until opened.
NicknameBig Blue
When: low-friction tweaks — click the value itself to type. (Click it.)
ActiveBus appears on the live map.
When: boolean settings — label-left, switch-right, optional sub-text.
D · Compound & data-entry niceties
$
When: a fixed prefix/symbol clarifies the value (currency, @, http://).
When: a value plus its unit (px/%/m, hr/min) belong together.
When: mostly-required forms — mark required with * + a legend.
Must be between 1 and 99.
When: validation — message replaces helper, control flips to danger.
E · Novel / futuristic
A few less-common directions that fit the sharp, technical brand.
When: minimal, editorial forms; less boxy chrome.
When: label sits in the border itself — compact, distinctive, still clear.
When: short labels next to controls — the gutter aligns label↔field tightly.
On board
24
When: the value is the headline (dashboards, KPIs you can also edit).
route_id>
When: technical/config surfaces — leans into the monospace, sharp aesthetic.
Macro · the same fields, four contexts
Route name · School · Capacity · Active — arranged for where they live. This is the real decision: match the layout to the job of the page.
Data-entry form
Label on top, two-column grid. Built to fill in.
Settings list
Label-left / value-right + Edit. Built to review.
Route nameRoute 12
SchoolLincoln Elementary
Capacity48 riders
Active
Compact panel
Tight inline rows, live controls. Built to tune.
Route
School
Capacity48
Active
Onboarding step
One floating field, big target. Built to focus.