Components
Select
A native select restyled with the customizable select API.
The .select restyles a native <select> using appearance: base-select, so the dropdown
picker matches the rest of the system where supported. Falls back to the native control
otherwise (gated behind @supports).
The base-select pattern requires a <button><selectedcontent></selectedcontent></button> as
the select's first child — the button is the trigger and <selectedcontent> mirrors the chosen
option. Keep the <option>s (an <optgroup> label works as a native fallback) after it.
Default
Loading components…
<div class="field"> <label class="field__label" for="f-sort">Sort by</label> <select class="select" id="f-sort" name="sort"> <button> <selectedcontent></selectedcontent> </button> <!-- Keep label in optgroup as a fallback --> <optgroup class="grid gap-px" label="Sort by"> <legend class="text-eyebrow text-muted-foreground p-xs">Sort by</legend> <option value="recent" selected>Most recent</option> <option value="popular">Most popular</option> <option value="price-asc">Price: low to high</option> <option value="price-desc">Price: high to low</option> </optgroup> </select></div>