Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA member multi-select that shows an avatar stack in the trigger and offers Invite by email when the typed address is not a member. Use this when people add several teammates to a project, channel or document.
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 in share and add-member dialogs, where most people are picked from a list but a new person is sometimes added by typing their address.
Do not use it when only existing members are allowed. Remove the invite path by leaving out onInvite.
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 |
| --------------- | ----------------------------------- | ---------------- | --------------------------------- | ----------------------------------------------------------------- |
| members | { id, name, email, avatarUrl? }[] | - | People who can be picked. |
| value | string[] | - | Selected member ids (controlled). |
| defaultValue | string[] | [] | Initial selection. |
| onValueChange | (ids: string[]) => void | - | Runs on every change. |
| onInvite | (email: string) => Member \\ | Promise<Member> | - | Enables the Invite row. Return the new member, which is selected. |
| stack | number | 4 | Avatars shown before +N. |
combobox whose name lists the first names and the number left over.aria-hidden; each person's name and email are text in the row.aria-checked and the list is aria-multiselectable.The pattern ships with a Testing Library test (team-members-multi-avatars.test.tsx) that covers the avatar stack and its name, toggling, searching by email and inviting a new address.