Contact Picker - Interactive Lab | IconVault
Try the real Contact Picker API: capability check, property selection and live picked contacts. Free, runs in your browser.
Contact Picker
Contact selection with the real permission flow
The Contact Picker API is not available here. It only exists in Chrome for Android 80+ (served over HTTPS), and desktop browsers do not implement it at all. The controls below call the real API and report the outcome honestly; nothing is simulated and no fake contact list is shown.
Picker options
API missingProperties to request (from getProperties())
Unavailable on this device.
5 of 5 free picks left. Contacts are never uploaded.
Privacy by design: your app never sees the address book. The user picks explicitly, and you receive only the requested fields of the chosen contacts.
Picked contacts
No picker session yet
On a supported Android device this opens the system contact picker.
The real code
// 1. Ask what the device can share (returns e.g. ["name","email","tel"])
const available = await navigator.contacts.getProperties();
// 2. Open the system picker. Must run in a user gesture, over HTTPS.
try {
const picked = await navigator.contacts.select(
["name", "email", "tel"],
{ multiple: true }
);
console.log(picked); // only the chosen contacts, only requested fields
} catch (err) {
// AbortError: user dismissed. NotAllowedError: permission denied.
}About this tool
IconVault's Contact Picker playground calls the genuine API: `getProperties()` reports what the device can share, then `contacts.select()` opens the system picker for exactly the fields you ticked. Results render as contact cards with names, phone numbers and emails. Where the API does not exist, the tool says so plainly instead of showing a fake contact list. It is free and runs fully in your browser.
Contact Picker is the privacy-safe way to get a phone number or email into a web form: your app never sees the address book, only the contacts the user explicitly chose. The lab covers the hard limits, Chrome for Android only, HTTPS required, user gesture required, and the `AbortError` versus `NotAllowedError` outcomes you must handle in production.
Frequently asked questions
Popular searches
More tools
Algorithm Visualizer
Watch sorting and searching animate step by step
Alt Text Helper
Write better image alt text with live feedback
ARIA Reference
Searchable ARIA roles and attributes guide
Array Visualizer
Step through map, filter, reduce like a debugger
Coming soon
CLI
Coming soon
Figma plugin
Coming soon
VS Code extension
Coming soon
Chrome extension
Coming soon
AI icon generator
Coming soon
Team workspaces
Coming soon