CASEWORK
COMPONENTS / INPUT

Input

Single-line text entry, wrapped in a field: mono label above, hint or error below. The textarea is the same component grown taller — same border, same states, same field wrapper.

VERSION1.0.0
TOKENS10 CONSUMED
CONTRASTAA / AAA
DEPENDENCIESNONE
01 / LIVE INSTANCES — ALL STATES
HOVER / FOCUS FORCED FOR SPECIMEN
STATE
SPECIMEN
STATE
SPECIMEN
DEFAULT
HOVER
FOCUS
FILLED
ERROR
REQUIRED — GIVE THE PROJECT A NAME.
DISABLED
WITH HINT
LOWERCASE, HYPHENS, NO SPACES.
TEXTAREA
LOADING: N/A — AN INPUT NEVER LOADS; VALIDATE ON BLUR OR SUBMIT.
02 / ANATOMY — EXPLODED VIEW
01 LABEL
--font-mono · --t1 · UPPERCASE · --fg-muted
PROJECT NAME
02 FIELD BOX
--bg-raised · --hair BORDER · --r1
03 VALUE
--font-ui · --t2 · PLACEHOLDER --fg-faint
e.g. Relay dashboard
REQUIRED — GIVE THE PROJECT A NAME.
04 HINT / ERROR LINE
--t1 MONO · HINT --fg-faint · ERROR --accent-ink
FIG. I-01 — FIELD STACK, GAP --s2. ERROR REPLACES HINT, NEVER BOTH.
03 / TOKENS CONSUMED
PROPERTYTOKENVALUE
VALUE FONT--font-ui / --t2PLEX SANS 14PX
LABEL FONT--font-mono / --t1JB MONO 12PX
SURFACE--bg-raisedRAISED
BORDER--hair1PX --line
BORDER / HOVER--fg-muted#6C6A64
BORDER / FOCUS--fgINK
BORDER / ERROR--accent-ink#BF3D06
PADDING--s2 / --s38 / 12PX
RADIUS--r12PX
DURATION--d1 / --ease120MS
04 / CODE — COPY-READY
<div class="field">
  <label class="field__label" for="name">PROJECT NAME</label>
  <input class="input" id="name" type="text"
         placeholder="e.g. Relay dashboard">
  <span class="field__hint">VISIBLE TO CLIENTS.</span>
</div>

<!-- error state -->
<input class="input" aria-invalid="true"
       aria-describedby="name-err">
<span class="field__error" id="name-err">
  REQUIRED — GIVE THE PROJECT A NAME.
</span>

<!-- textarea: same classes -->
<textarea class="input"></textarea>

/* CSS — components.css / INPUT */
05 / RESPONSIVE BEHAVIOUR
≥1024MAX-WIDTH 44CH — LINES STAY READABLE. FIELDS STACK, GAP --s6.
640–1023UNCHANGED. TWO-COLUMN FORMS COLLAPSE TO ONE.
<640FULL WIDTH. PADDING BLOCK STEPS TO --s3 — 44PX HIT TARGET.
06 / ACCESSIBILITY
ELEMENTNATIVE <INPUT> / <TEXTAREA> WITH <LABEL FOR>. NEVER PLACEHOLDER-AS-LABEL.
ARIAARIA-INVALID ON ERROR · ARIA-DESCRIBEDBY POINTS TO HINT/ERROR ID.
FOCUSBORDER SHIFTS TO --fg ON :FOCUS; GLOBAL RING ON :FOCUS-VISIBLE (KEYBOARD).
CONTRASTVALUE 18.2:1 AAA · LABEL 5.2:1 AA · ERROR TEXT 5.2:1 AA · PLACEHOLDER 3.2:1 — NEVER SOLE CARRIER.