demo · v135

Custom buttons open native pickers

A motivating example from the Open UI explainer: a date / colour / file picker needs custom branding around the icon. Before, you wrapped the native control or rebuilt the picker. With command="show-picker" a custom <button> can pop the native picker for an <input> without script.

command="show-picker": ?

event log

the code

<input id="dob" type="date">
<button commandfor="dob" command="show-picker">pick a date</button>

input.addEventListener("change", (e) => console.log(e.target.value));

see also