Native mobile apps always had this privilege of using the contact picker with ease and now web can do that too!

Check Browser Support

First up, check if the browser supports this API:

const hasContactPicker = "contacts" in navigator && "ContactsManager" in window;

## Invoke Select Method
javascript
const properties = "name, tel, email, address, icon".split(",");
const options = { multiple: true };

const fetchContact = async (evt) => {
  try {
    const contacts = await navigator.contacts.select(properties, options);
    // ^ [{},{}]
  } catch (err) {
    // Handle error
  }
};

contactButton.addEventListener("click", (evt) => fetchContact(evt));

The contacts would be an array of objects with keys being the requested properties and values being the corresponding contact details.

Important Notes

• This API works only on top level window
• User gesture is required before invoking the select method!

View the demo here.