Components
Multi-address recipient field
Collect To, Cc and Bcc recipients as removable chips with searchable known/custom addresses.
On this page
Purpose and composition
Collect To, Cc and Bcc recipients as removable chips with searchable known/custom addresses.
Use with independent arrays for To/Cc/Bcc; never combine them into a generic contact list.
Anatomy
| Part | Responsibility |
|---|---|
| Category | To/Cc/Bcc label |
| Chips | Name and named remove action |
| Query | Combobox input |
| Popup | Up to eight matching options |
Configuration and variants
| Input / variant | Contract |
|---|---|
| values/onChange | Controlled EmailAddressOption array |
| allowCustom | true default |
| options | Known records; selected email addresses excluded |
| deduplication | Lowercase email set when adding |
States and feedback
| State | Visible / behavioral result |
|---|---|
| Empty | Search or enter an email placeholder |
| Selected | Chips wrap inside available width |
| Search | Matching options or complete-address guidance |
| Custom | Valid unknown address becomes one-off recipient |
Interaction and responsive behavior
- Enter chooses the first visible option.
- Backspace with an empty query removes last recipient.
- Escape clears query and closes.
- Chip remove filters matching email string.
Accessibility contract
- Combobox has To recipients-style label.
- Remove action names the email.
- Arrow selection is absent; listbox options all have aria-selected=false.
Known implementation limits
Mixed-case caller data needs normalization because add uses case-insensitive deduplication while chip removal uses exact equality.
Composition example
<MultiEmailAddressField label="To" values={to} options={people} onChange={setTo} allowCustom />Source references
| File | Responsibility |
|---|---|
| components/ui/multi-email-address-field.tsx | MultiEmailAddressField |
Examples from the app
Actual Sonarist components with fictional conversations, people, example.com addresses and simulated operational states. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-08 · Revision 10f45d1377b5 · Documentation v1.0.0