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

element.showPicker();

Example

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

BCD tables only load in the browser