ttolbel UI

Component

Contact

A button that opens the device contact picker where supported, filling the selected person into your form. Simulated here in the demo so the flow is visible on any browser.

Standalone

contact.tsx
<NativeContact onSelect={(contact) => setPicked(contact)} />

Example

Picking a contact through the device picker fills the selected person into the form directly below.

Choose a contact

No contact selected yet.

contact-example.tsx
<NativeContact
  label="Pick from contacts"
  variant="tinted"
  onSelect={(contact) => setPicked(contact)}
/>

Capabilities

PropTypeDescription
onSelectrequired(contact: PickedContact) => void-
labelstring-
size"xs" | "sm" | "md" | "lg" | "xl"-
variant"primary" | "secondary" | "tinted" | "plain" | "outline"-
fullWidthboolean-
disabledboolean-