Components
Single email identity field
Choose a From identity or one known/custom address with an attached searchable popup.
On this page
Purpose and composition
Choose a From identity or one known/custom address with an attached searchable popup.
Use for a single identity; use MultiEmailAddressField for To/Cc/Bcc collections.
Anatomy
| Part | Responsibility |
|---|---|
| Label | Fixed-width From/To category |
| Input | Combobox with value preview or search query |
| Options | Name, address, description and selected state |
Configuration and variants
| Input / variant | Contract |
|---|---|
| value/options/onChange | Controlled EmailAddressOption selection |
| allowCustom | false default; simple email validation enables custom option |
| option fields | id optional; name/email required; description/initials/color/isNew optional |
| placeholder/className | Optional presentation |
States and feedback
| State | Visible / behavioral result |
|---|---|
| Collapsed | Name · email preview |
| Search | Filtered options |
| Custom | Use address option when valid and not known |
| No match | Empty message |
Interaction and responsive behavior
- ArrowDown/Up change active index; Enter chooses; Escape resets query.
- Blur outside closes popup.
- Typing can emit undefined selection until valid.
- Known exact addresses are reused.
Accessibility contract
- Combobox controls a listbox with aria-selected options.
- Active option has no aria-activedescendant mapping.
- The visible label is backed by explicit input aria-label.
Known implementation limits
Dropdown width and right anchoring must be checked in narrow hosts; preserve trigger and popup in the crop. Validation is a simple regex, not deliverability proof.
Composition example
<EmailAddressField label="From" value={from} options={identities} onChange={setFrom} />Source references
| File | Responsibility |
|---|---|
| components/ui/email-address-field.tsx | EmailAddressField and EmailAddressOption |
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