HTMLInputElement: showPicker() method

Syntax

showPicker()

Parameters

None.

Return value

None (undefined).

Exceptions

InvalidStateError DOMException

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

NotAllowedError DOMException

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

SecurityError DOMException

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 if showPicker() is supported:

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

Normal input pickers

This example shows how this feature can be used for color and file input pickers.

HTML

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

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

JavaScript

The code simply gets the previous element of the selected button and calls showPicker() 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 type text that uses it, and a button.

<datalist id="browsers">
  <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 calls showPicker() 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
  }
});

As for the other pickers, we can't show this code running as a live example because it runs in a cross-origin frame, and would cause a SecurityError.

showPicker() for autocomplete

showPicker() can launch a picker for an autocomplete 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