Skip to content

Select

Stable Available in release assets

Present a native option list while preserving browser-owned keyboard, pointer, validation, and submission behavior.

Select primary example

Show code
<div class="thin-field">
  <label for="region">Shipping region</label>
  <select class="thin-select" id="region" name="region" aria-describedby="region-hint">
    <option value="">Choose a region</option>
    <option value="na">North America</option>
    <option value="eu">European Union</option>
    <option value="apac">Asia-Pacific</option>
  </select>
  <small class="thin-hint" id="region-hint">Delivery timing depends on the selected region.</small>
</div>

Each authored example uses the production assets and includes copyable markup.

Default select

A labelled native select with a placeholder option and durable option values.

Show code
<div class="thin-field">
  <label for="region">Shipping region</label>
  <select class="thin-select" id="region" name="region" aria-describedby="region-hint">
    <option value="">Choose a region</option>
    <option value="na">North America</option>
    <option value="eu">European Union</option>
    <option value="apac">Asia-Pacific</option>
  </select>
  <small class="thin-hint" id="region-hint">Delivery timing depends on the selected region.</small>
</div>

Required selection

Native required validation prevents submission until an option is chosen.

Show code
<div class="thin-field">
  <label for="country">Country</label>
  <select class="thin-select" id="country" name="country" required>
    <option value="">Choose a country</option>
    <option value="ca">Canada</option>
    <option value="us">United States</option>
  </select>
</div>

Disabled select

Disabled prevents opening the list and excludes the control from successful validation.

Show code
<div class="thin-field">
  <label for="locked-region">Region</label>
  <select class="thin-select" id="locked-region" name="region" disabled>
    <option value="na" selected>North America</option>
  </select>
</div>

With hint

Persistent hint text remains available through aria-describedby.

Show code
<div class="thin-field">
  <label for="size">Size</label>
  <select class="thin-select" id="size" name="size" aria-describedby="size-hint">
    <option value="">Choose a size</option>
    <option value="s">Small</option>
    <option value="m">Medium</option>
  </select>
  <small class="thin-hint" id="size-hint">Sizes run slightly large.</small>
</div>

Anatomy

  • Explicitly associated label
  • Native select.thin-select
  • Select with authored name
  • Authored option elements with durable values
  • Optional persistent hint

Variants and sizes

  • Default — shown above
  • Required — shown above
  • Disabled — shown above
  • With hint — shown above

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Unselected placeholder
  • Selected option
  • Focused
  • Invalid
  • Disabled
  • Long localized label and options
  • Narrow container
  • 200% and 400% zoom

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Opening the list, arrow-key navigation, typeahead, native constraint validation, form reset, and value submission remain browser owned.

Accessibility

Use an explicit label, retain visible focus, and connect persistent hints and errors with aria-describedby. Option text must remain readable without relying on color alone.

Contract
NATIVE
Basis
Native <input>, <select>, and <textarea>; no APG widget
Evidence
  • tests/unit/library/form-controls-stable.test.ts

API

Use <thin-select><select …></thin-select> with authored option elements. Native required, disabled, multiple, size, and aria-describedby attributes remain the state and submission API.

Behavior tier: native

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

The native select remains keyboard operable and submits its selected value without CSS or JavaScript.

Assets and dependencies

  • /components.css

Dependencies: None

Source: packages/ui/src/items/select/style.ts

Stability evidence

  • Native option selection, validation, and no-JavaScript contract: test:tests/unit/library/form-inputs.test.ts
  • Complete item-specific API, fallback, and difficult-state documentation: test:tests/unit/library/form-controls-stable.test.ts
  • Cross-theme, density, localized, narrow-container, zoom, and forced-colors fixture: review:site/src/pages/quality/index.astro#quality-review

Composition

Derived from the examples and style specs, not authored.

Composes