TheHTMLInputElement.showPicker() method displays the browser picker for aninput 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.

Commonly browsers implement it for inputs of these types:"date","month","week","time","datetime-local","color", or"file".It can also be prepopulated with items from a<datalist> element orautocomplete attribute.

More generally, this method should ideally display the picker for any input element on the platform that has a picker.

Syntax

showPicker()

Parameters

None.

Return value

None (undefined).

Exceptions

InvalidStateErrorDOMException

Thrown if the element is not mutable, meaning that the user cannot modify it and/or that it cannot be automatically prefilled.

NotAllowedErrorDOMException

Thrown if not explicitly triggered by a user action such as a touch gesture or mouse click (the picker requiresTransient activation).

SecurityErrorDOMException

Thrown if called in a cross-origin iframe, except for file and color pickers (exempt for historical reasons).

Security

Transient user activation is required. The user has to interact with the page or a UI element in order for this feature to work.

Examples

Feature Detection

The code below shows how to check ifshowPicker() is supported:

if ("showPicker" in HTMLInputElement.prototype) {  // showPicker() is supported.}

Normal input pickers

This example shows how this feature can be used forcolor andfile input pickers.

HTML

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

JavaScript

The code simply gets the previous element of the selected button and callsshowPicker() on it.

document.querySelectorAll("button").forEach((button) => {  button.addEventListener("click", (event) => {    const input = event.srcElement.previousElementSibling;    try {      input.showPicker();    } catch (error) {      console.log(error);    }  });});

Result

Click the button next to each input type to show its picker.

showPicker() for a datalist input

showPicker() can launch the picker for a list of options defined in a<datalist>.

First we define a<datalist> in HTML consisting of a number of internet browsers, an input of typetext that uses it, and a button.

<datalist>  <option value="Chrome"></option>  <option value="Firefox"></option>  <option value="Opera"></option>  <option value="Safari"></option>  <option value="Microsoft Edge"></option></datalist><input type="text" list="browsers" /><button>Select browser</button>

The code below adds an event listener that callsshowPicker() when the button is clicked.

const button = document.querySelector("button");const browserInput = document.querySelector("input");button.addEventListener("click", () => {  try {    browserInput.showPicker();  } catch (error) {    // Fall back to another picker mechanism  }});

showPicker() for autocomplete

showPicker() can launch a picker for anautocomplete input.

Here we define an input that takes an autocomplete option of "name".

<input autocomplete="name" /> <button>Show autocomplete options</button>

The code below shows the picker for the input when the button is clicked.

const button = document.querySelector("button");const browserInput = document.querySelector("input");button.addEventListener("click", () => {  try {    browserInput.showPicker();  } catch (error) {    // Fall back to another picker mechanism  }});

Specifications

Browser compatibility

See also

• <input>
• HTMLInputElement
• HTMLSelectElement.showPicker()
• <datalist>
• autocomplete