Select os-013

Also known as: dropdown, single-choice field

A labelled box for picking one option from a short list — delivery day, pack size, sort order. Pair it with a label like any other form field.

Example

order meta — pick a Meadow Farm delivery slot

Meadow Farm CSA

Order meta

Choose when this week’s Family share leaves the farm. Boxes are packed unaltered — not cooked or added to.

Share: Family · River lane drop · next pack Thursday

Delivery day

Van leaves Meadow Farm by noon on morning slots; afternoon slots after 14:00.

Pickup slot

Variants

default · quiet · sizes · disabled · invalid

Share size

Sort shop list (quiet)

Drop radius (sm)

Collection point (lg)

Harvest season (disabled)

Delivery day (needs a choice)

Pick a delivery day so we can pack your box.

How it works

Layout: Label above a full-width control. A Material Symbol chevron sits on the right and never steals clicks. Hint or error text can sit under the field.

Interaction: This is a real native select — keyboard and mobile pickers come for free. Clicking the label focuses the control. Disabled fields use not-allowed cursor, not a pointer-events lock alone.

Motion: None in v0. The open list is the browser’s own UI. Any future animation must stay quiet and honour reduced motion.

Content: Keep option lists short and plain (days, sizes, sorts). Farm-shop wording is fine. Do not dress the closed field in brand-green borders or badges.

Relationships

Pair with a visible label the same way text fields do. Often lives inside a Sheet for filters. Actions beside the field use Button — Select is for choosing, not submitting.

Parameters

Name	Type	Default	Description
`label`	string	—	Visible label (required)
`options`	array	—	`{ value, label, disabled? }`
`size`	string	`md`	`sm` \| `md` \| `lg`
`variant`	string	`default`	`default` \| `quiet`
`hint` / `error`	string	—	Supporting or invalid message
`disabled`	boolean	`false`	Native disabled; cursor-not-allowed

Tokens

--font-primary --color-bg --color-bg-muted --color-text --color-text-secondary --color-border --color-border-focus --color-error --radius-md --radius-lg --shadow-sm --spacing-2 --spacing-3 --spacing-4 --spacing-5 --spacing-10 --spacing-12 --text-sm --text-base --transition-fast --weight-semibold

Provenance

Item	Detail
Inspiration	21st.dev / Origin UI Select (closed-state intent)
Scout approved	Phil Parry, 2026-09-22
Maturity	experimental
Binding	`components/select/select.css` + `components/select/react/Select.tsx`

Code

os-013 · Source: components/select/select.css ▾

<div class="og-select og-select--md">
  <label class="og-select__label" for="delivery-day">Delivery day</label>
  <div class="og-select__control">
    <select id="delivery-day" class="og-select__native">…</select>
    <span class="og-select__chevron" aria-hidden="true">…</span>
  </div>
</div>