HTMLInputElement.showPicker()

The HTMLInputElement.showPicker() method shows a browser picker to the user.

A browser picker is shown when the element is one of these types: "date", "month", "week", "time", "datetime-local", "color", or "file". It can also be prepopulated with items from a <datalist> element or autocomplete attribute.

Return value

undefined.

Exceptions

NotAllowedError DOMException: Thrown if not called in response to a user gesture such as a touch gesture or mouse click.
SecurityError DOMException: Thrown if called in a cross-origin iframe.

Syntax

showPicker()

Examples

Click the button in this example to show a color picker.

HTML

<input type="color">
<button>Show the color picker</button>

JavaScript

const button = document.querySelector("button");
const colorInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    colorInput.showPicker();
    // A color picker is shown.
  } catch (error) {
    window.alert(error);
    // Use external library when this fails.
  }
});

Result

Specifications

Specification
HTML Standard # dom-input-showpicker

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`showPicker`	99	99	No See bug 1745005.	No	85	No See bug 234009.	99	99	No See bug 1745005.	No	No See bug 234009.	No

Name	Web APIs
Version
Badge
Last Updated	2022-04-27T09:33:08Z