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: