showPicker() for <select>
The HTMLSelectElement.showPicker() method displays the browser picker for a select element.
This is the same picker that would normally be displayed when the element is selected, but can be triggered from a button press or other user interaction.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 121 | 121 | 122 | Preview | 121 | | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Experimental
- Requires an experimental browser flag to be enabled
Syntax
HTML
<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.
PreviewFullscreen
Shipping options
Use a custom button label while keeping a native select as the real control.
PreviewFullscreen
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.