CASEWORK
COMPONENTS / SELECT

Select

Native single-choice dropdown, styled to match the input box. The popup list stays native — the OS renders it better than any recreation. The chevron is drawn in CSS; no icon assets.

VERSION1.0.0
TOKENS9 CONSUMED
CONTRASTAA / AAA
DEPENDENCIESNONE
01 / LIVE INSTANCES — ALL STATES
HOVER / FOCUS FORCED FOR SPECIMEN
STATE
SPECIMEN
STATE
SPECIMEN
DEFAULT
HOVER
FOCUS
DISABLED
WITH HINT
UNLISTED PAGES NEED THE DIRECT LINK.
OPEN / ERROR: OPEN LIST IS OS-NATIVE — NOT STYLABLE. ERROR: USE ARIA-INVALID AS ON INPUT.
02 / ANATOMY — EXPLODED VIEW
01 LABEL
SHARED FIELD LABEL — SEE INPUT
STATUS
02 BOX
SAME BOX MODEL AS INPUT · APPEARANCE:NONE
03 VALUE
--font-ui · --t2 · SELECTED OPTION
Shipped
04 CHEVRON
CSS BORDER, ROTATED 45° · --fg-muted · NO IMAGE
FIG. S-01 — RESERVED INLINE-END PADDING --s8 KEEPS TEXT CLEAR OF THE CHEVRON.
03 / TOKENS CONSUMED
PROPERTYTOKENVALUE
VALUE FONT--font-ui / --t2PLEX SANS 14PX
SURFACE--bg-raisedRAISED
BORDER--hair1PX --line
BORDER / HOVER--fg-muted#6C6A64
BORDER / FOCUS--fgINK
PADDING--s2 / --s3 / --s8END PAD FOR CHEVRON
CHEVRON--fg-muted / --s21.5PX STROKE
RADIUS--r12PX
DURATION--d1 / --ease120MS
04 / CODE — COPY-READY
<div class="field">
  <label class="field__label" for="status">STATUS</label>
  <span class="select">
    <select id="status">
      <option>Shipped</option>
      <option>In progress</option>
      <option>Archived</option>
    </select>
  </span>
</div>

/* CSS — components.css / SELECT
   .select wraps the native element;
   .select::after draws the chevron. */
05 / RESPONSIVE BEHAVIOUR
≥1024MAX-WIDTH 44CH, MATCHES INPUT.
640–1023UNCHANGED.
<640FULL WIDTH. NATIVE PICKER UI TAKES OVER ON TOUCH — THAT IS THE POINT.
06 / ACCESSIBILITY
ELEMENTNATIVE <SELECT> — FULL KEYBOARD AND SCREEN-READER SUPPORT FOR FREE.
ARIANONE NEEDED. LABEL VIA <LABEL FOR>.
FOCUSBORDER TO --fg ON :FOCUS; GLOBAL RING ON :FOCUS-VISIBLE.
CONTRASTVALUE 18.2:1 AAA · LABEL 5.2:1 AA · CHEVRON IS DECORATIVE.