Work in progress - do not use in production. This component is still being built: it is not flagged Ready for Dev, so its markup, attributes, events and styles can all still change without notice, it is not covered by the accessibility gate, and it is not published to npm. It is on this site so the work can be seen and reviewed - nothing more.

Dropdown

A styled single-select built on the native customizable-select API, rendered as <select is="root-dropdown">.

Usage

<select is="root-dropdown" aria-label="Choose a framework">
  <optgroup label="Frontend">
    <option value="react">React</option>
    <option value="vue">Vue</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="node">Node</option>
    <option value="deno">Deno</option>
  </optgroup>
</select>

Where the customizable-select API is supported, the component injects the <button><selectedcontent></selectedcontent></button> picker and styles the picker, <optgroup> labels, options, checkmark and picker icon; options may contain rich markup. Where it is not, it leaves the plain native <select> + <optgroup> + <option> as the fallback.

Attributes

Attribute	Type	Default	Description
`value`	`string`	-	Selected value
`disabled`	`boolean`	`false`	Disables the control
`aria-label`	`string`	-	Accessible label

Events

Native change (and input) events fire from the underlying <select>.

Extends

HTMLSelectElement - use with <select is="root-dropdown">.