Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA recipients field that turns typed or pasted addresses into chips, splits pasted lists and Name <email> forms, flags invalid addresses and ignores duplicates. Use this when people address a message, an invite or a share.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for To fields, invites and sharing dialogs, where people paste a column from a spreadsheet or a line from another mail client and expect every address to become its own chip.
Do not use it when people pick from a known directory. Use an assignee or team-member picker, which resolves people rather than parsing text.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
value | Recipient[] | - | { email, name?, valid } (controlled). |
defaultValue | Recipient[] | [] | Initial recipients. |
onValueChange | (recipients: Recipient[]) => void | - | Runs on every change. |
max | number | - | Largest number of recipients. |
label | string | To | Names the field. |
placeholder | string | Add people… | Shown while empty. |
disabled | boolean | false | Disables the field. |
group named by label; each chip is a focusable element with the address as text. Invalid chips carry aria-invalid and read not a valid address.role="status" line announces additions (Added 3 recipients, 1 invalid), removals and the limit.Name <email>.The pattern ships with a Testing Library test (email-recipients-input.test.tsx) that covers committing on keys and blur, splitting a paste, Name <email> parsing, invalid and duplicate addresses and removing chips with the keyboard.