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

First up, Check if the browser support this API:

1

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

invoke select method:

1
2
3
4
5
6
7
8
9
10
11
12
13

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

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

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

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

Note:

• This API works only on top level window.

• User gesture is required before invoking the select method!

View the demo here and the source below: