Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99

--d --h --m --sGet Pro

Dialog Invite Emails

ProNew

An invite dialog where typed or pasted addresses become chips with named remove buttons, invalid ones are marked in text and block sending, and the button counts the invites.

Customize

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.

children

Guide and examples

When to use it

Use this to invite teammates in bulk, where people paste a column from a spreadsheet.

Do not use it for picking existing users (use a combobox) or when roles must be chosen per person.

Installation

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.

Log in Get Pro for $35

Props

DialogInviteEmails

Prop	Type	Default	Description
`children`	`ReactNode`	-	The trigger.
`onInvite`	`(emails: string[]) => void \| Promise<void>`	-	Called with the valid addresses; the dialog closes afterwards.

Accessibility

The chips are a labelled list; each remove button is named "Remove a@x.dev"; an invalid chip adds hidden text "(not a valid address)" and a linked alert.
A pasted list is split on spaces, commas, semicolons and newlines; duplicates are ignored and the result is announced.
Send is disabled while any chip is invalid and says how many invites it will send.

Keyboard

Key	Action
Enter, comma or space	turns the text into a chip
Backspace in the empty field	removes the last chip
Tab	from the field to the remove buttons and Send

Testing

The pattern ships a Testing Library test (dialog-invite-emails.test.tsx) that covers chips from keys and paste, duplicates, invalid addresses, Backspace and sending.