Select

A native select with optional customizable-picker enhancement. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• select, select--customizable

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<label for="region">Region</label>
<select id="region" class="select select--customizable" name="region">
  <option value="north">North</option>
  <option value="south">South</option>
</select>

Variants and composition

select keeps native behavior. select–customizable opts into base-select only where supported and still falls back to the platform picker.

The enhancement applies only to a select.select without multiple or size, in browsers supporting appearance:base-select, outside forced colors. The popup is limited to 20rem and the available anchor area minus 1rem, with contained scrolling. Multiple and sized selects retain native presentation. An optional button > selectedcontent truncates long values; omit that enhancement if the target browser cannot reliably reset it.

Behavior and accessibility

The customizable picker is opt-in and feature-gated; the native select remains the fallback. Label it and give options explicit values. Verify optional selectedcontent markup in target browsers before relying on form reset.

Reference

See the interactive Storybook specimen ↗. Continue to Sheet or return to the Official preset overview.