Markup
Drop-in HTML structure with zero configuration.
<select-dropdown>
<select-trigger>
<span class="select-label-text">Pick one</span>
</select-trigger>
<input type="hidden" name="field" />
<select-panel>
<select-label>Group</select-label>
<select-option value="a">Option A</select-option>
<select-option value="b" selected>Option B</select-option>
<select-divider></select-divider>
<select-option value="c">Option C</select-option>
</select-panel>
</select-dropdown>Simple Select
A straightforward dropdown with a preselected value. Click or use keyboard to navigate options.
Grouped Options
Organize options with
<select-label> headings and
<select-divider> separators.
Non-option elements are skipped during keyboard navigation.
CSS Variable Theming
Every color is driven by custom properties. Override them on a wrapper class to create distinct themes with no JavaScript.
Form Integration
A hidden <input> inside the component
syncs with the selected value, so it works natively with
any <form>.
Large Dataset
A long scrollable list with grouped regions. Type-ahead search jumps to matching options.
Every Country
195 countries in alphabetical order. Try the multi-character
typeahead — type uni quickly to jump to
"United Kingdom", or bra for "Brazil".
Repeating the same letter (e.g. s s)
cycles through all S countries.
Disabled Options
disabled on a <select-option> gets
aria-disabled, is skipped by the arrow keys, Home/End
and type-ahead, and cannot be clicked.
Disabled Control
disabled on the host is observed: the panel refuses to
open, the trigger drops out of the tab order and reports
aria-disabled. Toggle it live.
Bring Your Own Caret
The stock caret is injected only when the trigger has no element
child other than .select-label-text. Give it an
<svg> and the component leaves the chrome to you.
.select-icon spans:
-
Value Before Options
value is an observed attribute and the setter remembers
a value whose option does not exist yet. Here the value is set
immediately, and the options arrive a second later.
Opened From Outside
A button outside the component calling el.show() from its
own click handler leaves the panel open — the outside-click listener
waits for the opening event to finish before it attaches.
Keyboard Navigation
Full WAI-ARIA compliant keyboard support. Every interaction that works with a mouse also works with a keyboard.