CASEWORK
COMPONENTS / SELECT

Select

Native single-choice dropdown, styled to match the input box. The popup list stays native, because the OS renders it better than any recreation. The chevron is drawn in CSS, with 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.