ContactPicker
Let users share entries from their address book through the platform's native contact picker - your app only ever sees the contacts the user explicitly selects.
@inject Bit.Butil.ContactPicker contactPickerMDN reference
Warning:
Mobile Chromium only
The Contact Picker API is available exclusively on Chromium-based mobile browsers (Chrome
on Android, and derivatives). Desktop browsers, Firefox and Safari do not implement it -
on this machine
IsSupported will almost certainly return false. There is no
programmatic access to the address book: the user always drives the native picker.
Note:
User gesture required
Select must be called from a user-gesture handler (a click or tap). Calls made
outside a gesture - or while a picker is already open - are rejected by the browser, so keep
the call in a try/catch.
Returns true when the runtime exposes navigator.contacts. During prerender/SSR the check returns false rather than throwing, so defer it to OnAfterRenderAsync.
@inject Bit.Butil.ContactPicker contactPicker
var supported = await contactPicker.IsSupported();
Live sample
support check output
Results will appear here when you interact with the samples.
Returns the list of contact properties the platform can expose. Common values are name, email, tel, address and icon - pass a subset of these to Select.
var properties = await contactPicker.GetProperties();
// e.g. ["name", "email", "tel", "address", "icon"]
Live sample
properties output
Results will appear here when you interact with the samples.
Opens the native picker and returns the user's selection as typed ContactInfo objects. Choose which properties to request; passing null (or an empty array) falls back to the default set of name, email and tel. Set multiple to let the user pick more than one contact.
var contacts = await contactPicker.Select(
properties: new[] { "name", "email", "tel" },
multiple: true);
foreach (var contact in contacts)
{
var names = string.Join(", ", contact.Name);
var emails = string.Join(", ", contact.Email);
var phones = string.Join(", ", contact.Tel);
}
Live sample
Properties to request
pick contacts output
Results will appear here when you interact with the samples.
API reference
Member
Signature
Description
IsSupported
ValueTask<bool> IsSupported()True when the runtime exposes navigator.contacts. Returns default (false) during prerender/SSR instead of throwing.
GetProperties
ValueTask<string[]> GetProperties()Returns the properties the platform can expose. Common values: name, email, tel, address, icon.
Select
ValueTask<ContactInfo[]> Select(string[]? properties = null, bool multiple = false)Opens the contact picker and returns the user's selection. Null/empty properties fall back to name, email and tel. Must be invoked from a user-gesture handler.
ContactInfo.Name
string[] Name { get; set; }The selected contact's names.
ContactInfo.Email
string[] Email { get; set; }The selected contact's email addresses.
ContactInfo.Tel
string[] Tel { get; set; }The selected contact's phone numbers.
ContactInfo.Address
string[] Address { get; set; }Postal addresses serialized as plain strings.
ContactInfo.Icon
string[] Icon { get; set; }Avatar images as self-contained data: URLs (base64) - no object-URL lifetime to manage.