Select

A styled native <select> with a fully custom picker in supporting browsers.

Composed of

Button: The trigger, in the outlined style

In browsers that support appearance: base-select (Chrome 135+), the picker opens as a styled popover matching the rest of the UI. Older browsers get the plain styled native select, from the same markup.

The <button> and <selectedcontent> children are only used by supporting browsers; others ignore them and render the native control.

Standalone

<link rel="stylesheet" href="https://esm.sh/@erikt/ui/select.css" />

Default

<select>
  <button>
    <selectedcontent></selectedcontent>
    <svg><!-- chevron-down --></svg>
  </button>
  <option>Apple</option>
  <option>Banana</option>
  <option>Cherry</option>
  <option>Mango</option>
</select>

Disabled

<select disabled>
  ...
</select>

With separator

Use an <hr> between options to visually group choices.

<select>
  <button>
    <selectedcontent></selectedcontent>
    <svg><!-- chevron-down --></svg>
  </button>
  <option>Apple</option>
  <option>Banana</option>
  <option>Cherry</option>
  <hr />
  <option>Other</option>
</select>

With groups

Use <optgroup> to group related options under a section label.

<select>
  <button>
    <selectedcontent></selectedcontent>
    <svg><!-- chevron-down --></svg>
  </button>
  <optgroup label="Tropical">
    <option>Mango</option>
    <option>Papaya</option>
    <option>Pineapple</option>
  </optgroup>
  <optgroup label="Stone fruit">
    <option>Cherry</option>
    <option>Peach</option>
    <option>Plum</option>
  </optgroup>
</select>

API reference

Type	Classes / attributes	What it does
Disabled	`[disabled]`	Fades the select and blocks input