Contact Picker Button — Free navigator.contacts with Manual Fallback

The Contact Picker API's navigator.contacts.select() lets a web page ask the operating system's own address book for a contact — no server, no OAuth, just a native picker UI the browser owns. It's also one of the narrowest browser APIs in existence: it shipped only in Chromium on Android, has no desktop implementation anywhere, and needs a real top-level user gesture in a secure context, so it essentially never fires inside a sandboxed preview iframe. This snippet treats that reality directly by building a manual entry path that stands on its own as a real feature, not a "sorry, this doesn't work" message.

The real device picker

pickDeviceContact() gates the whole attempt behind checking both 'contacts' in navigator and 'ContactsManager' in window, then calls navigator.contacts.select(['name', 'email'], { multiple: false }) inside a try/catch. On success, the resolved array's first entry's name and email fields populate the selected-contact card exactly the way a real invite flow would use them.

A manual path built to feel complete, not apologetic

Below the picker button sit two ordinary, always-present inputs for name and email, styled and labeled as a first-class alternative rather than a hidden fallback — "or enter manually" reads as an equal option, not an error state. useManualContact() validates that a name was entered, then renders the exact same selected-contact card the native picker would produce. Because almost every visitor to this demo — anyone not on Chromium for Android — will use this path by default, it had to be built as if it were the primary feature, which is exactly what makes this snippet worth studying alongside the more permission-flaky APIs in this batch.

One rendering path for both sources

showSelected(name, email) is the single function both the native picker and the manual form call to display a result, the same "shape-matched" discipline used in this library's canvas audio frequency bars snippet, where simulated and real audio data feed the identical drawing function. Whichever source provided the contact, the resulting UI — an avatar initial, name, and email — is indistinguishable.

Handling the empty and denied cases

An empty picker result (the user backed out without choosing anyone) gets its own clear status message rather than being treated as an error, and any thrown exception — commonly a SecurityError from a missing user gesture or a blocked iframe permissions policy — routes straight to the manual fields with focus already placed in the name input, so recovering from a failed native attempt takes zero extra clicks. Pair this with a share modal for an invite flow, or a team presence list to show who's already been added.

Customizing it

Request additional properties like tel or icon, allow multiple: true for a bulk invite flow, or validate the manual email field's format before accepting it.