# ContactIdentities > Every account one contact is reachable on (email, phone, WhatsApp, social) with a primary per channel, a link form that rejects duplicates, and a consent switch per channel. Source: https://docs.nasaqui.com/components/contact-identities ## Install ```bash npx shadcn@latest add https://docs.nasaqui.com/r/contact-identities.json ``` One person, many accounts. It lists every address, number and handle a contact can be reached on, lets you link a new one (rejecting one already on the list), choose a primary per channel, remove one, and record whether the person agreed to be contacted on each channel. ## When to use - The identity section of a contact record. - Anywhere consent has to be visible next to the address it applies to. ## When not to use - A single email field on a form: use `Field` and `Input`. - Merging two duplicate contacts: use [`ContactMerge`](https://docs.nasaqui.com/components/contact-merge). ## Import ```tsx import { ContactIdentities } from "@fadymondy/nasaq/web"; // inside this monorepo: "@nasaq/web" ``` ## Quick start ```tsx save(channel, value)} onRemove={async (identity) => remove(identity.id)} onSetPrimary={async (identity) => makePrimary(identity.id)} onConsentChange={async (channel, status) => setConsent(channel, status)} /> ``` ## Anatomy - Identity list: channel badge (text), value (left-to-right), primary and verified marks. Row actions open from a context-click or the row menu. - Link form: channel select and value, with inline validation. - Consent: one switch per consent channel, with the status word, date and source. - Remove confirmation dialog. ## API | Prop | Type | Description | | --- | --- | --- | | `identities` | `ContactIdentity[]` | `{ id, channel, value, label?, primary?, verified? }`. | | `consent` | `Partial>` | `{ status: "granted" or "denied" or "unknown", at?, source? }`. | | `channels` | `ContactChannel[]` | Channels offered when linking. | | `consentChannels` | `ContactChannel[]` | Channels that get a consent switch. Default email, whatsapp, phone. | | `onAdd` | `({ channel, value, label? }) => Promise` | Link an account. | | `onRemove` / `onSetPrimary` | `(identity) => Promise<...>` | Row actions. | | `onConsentChange` | `(channel, "granted" or "denied") => Promise<...>` | Switch flipped. | | `readOnly` | `boolean` | Hide every action. | | `labels` | `ContactIdentitiesLabelOverrides` | Override any string. | Pure helpers: `normalizeContactIdentity`, `contactIdentityKey`, `validateContactIdentity`, `mergeContactConsent`, `sortContactIdentities`. ## Examples **Read only** ```tsx ``` ## Accessibility Each switch is named with its channel. Errors use `role="alert"`. Status is a word, never colour alone. The remove dialog returns focus to the row. ## RTL & i18n English and Arabic ship. Emails, phone numbers and handles stay left-to-right. Channel names are text badges, so no brand mark is redrawn. ## Styling & tokens Semantic tokens only, logical Tailwind classes. Extend with `className`. ## Do / Don't - Do treat consent as per channel: agreeing to email is not agreeing to WhatsApp. - Don't pre-set consent to granted. ## Related - [`ContactMerge`](https://docs.nasaqui.com/components/contact-merge) - [`ContactList`](https://docs.nasaqui.com/components/contact-list) ## Lab https://docs.nasaqui.com/?path=/docs/components-crm-contact-identities--docs ## Code ### React ```tsx save(channel, value)} onRemove={async (identity) => remove(identity.id)} onSetPrimary={async (identity) => makePrimary(identity.id)} onConsentChange={async (channel, status) => setConsent(channel, status)} /> ``` ### shadcn ```tsx save(channel, value)} onRemove={async (identity) => remove(identity.id)} onSetPrimary={async (identity) => makePrimary(identity.id)} onConsentChange={async (channel, status) => setConsent(channel, status)} /> ``` ### Vue ```vue ``` ### Blade ```blade @php $identities = [ ['id' => 'a1', 'channel' => 'email', 'value' => 'sara@example.com', 'label' => 'Work', 'primary' => true, 'verified' => true], ['id' => 'a2', 'channel' => 'email', 'value' => 'sara.k@home.example'], ['id' => 'a3', 'channel' => 'phone', 'value' => '+201001234567', 'primary' => true], ]; $consent = [ 'email' => ['status' => 'granted', 'at' => '2025-03-01T08:00:00Z', 'source' => 'Signup form'], 'phone' => ['status' => 'denied'], ]; @endphp ``` ### HTML + Alpine ```html

Linked accounts

Every address, number and handle this person uses. A message to any of them reaches the same contact.

Email sara@example.com Work Verified Primary
Email sara.k@home.example
Phone +201001234567 Primary

Consent by channel

Whether this person agreed to be written to. Consent belongs to the channel, so it covers every account on it.

  • Email Opted in Since via Signup form
  • WhatsApp No account linked on this channel
  • Phone Opted out
```