← Back to release summary

HTMLInputElement showPicker()

Category
User input
Type
New or changed feature
Status
Enabled by default (Chrome 99)
Intent stage
Shipped

Summary

The HTMLInputElement showPicker() method allows web developers to programmatically show a browser picker for input elements (temporal, color, file, and those with suggestions like datalist or autofill).

Motivation

Developers have been asking for years for a way to programmatically open a browser date picker. See https://www.google.com/search?q=programmatically+open+date+picker+site:stackoverflow.com Because of that, they had to rely on custom widget libraries and CSS hacks for specific browsers. This is currently possible in some browsers, for some controls, via the click() method. However this is not interoperable (https://github.com/whatwg/html/issues/6909#issuecomment-897097048) and considered a bad idea (https://github.com/whatwg/html/issues/3232#issuecomment-345279014). Providing showPicker() gives developers a supported alternative to click(), and will allow us to align Chromium's click() behavior with the specification and other browsers in a future Intent to Ship.

Standards & signals

Docs: https://developer.chrome.com/blog/show-picker/

Samples: https://show-picker.glitch.me/demo.html

Explainers: https://github.com/whatwg/html/pull/7319

View on chromestatus.com