showPicker() for <select>
The showPicker() method for <select> elements shows the dropdown menu or other user interface for picking one of the options. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The showPicker() method for <select> elements shows the dropdown menu or other user interface for picking one of the options. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 121 | 121 | 122 | Preview | 121 | | |
- Requires an experimental browser flag to be enabled
Syntax
<select id="mySelect">
<option>Option 1</option>
<option>Option 2</option>
</select>
<button onclick="document.getElementById('mySelect').showPicker()">
Open options
</button>Live demo
Open a select menu
Request the browser picker for a select element from a separate trigger button.
Shipping options
Use a custom button label while keeping a native select as the real control.
Use cases
Improve form input
Use showPicker() for <select> to make data entry more efficient, guided, or predictable inside real forms.
Reduce friction
Apply showPicker() for <select> when the browser can help users complete a task with fewer mistakes or less repetitive work.
Cautions
- Test showPicker() for <select> in your target browsers and input environments before depending on it as a primary behavior.
- Provide a fallback path or acceptable degradation strategy when support is still limited.
Accessibility
- Keep labels, instructions, validation, and keyboard behavior clear so the enhancement helps rather than surprises users.
Related links
Powered by web-features