## Invite Members (S—139)

Paste or type emails into chips, pick a role, and send; invalid addresses are flagged and sent invites list below.

- URL: https://sundaeui.dev/components/invite-members
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/invite-members.json`
- Tags: chips, roles, invite, team, members, email

Typing a comma, space or Enter turns the text into a chip; pasting a list splits it into many. Invalid addresses become outlined chips with a warning until fixed or removed.
Send shows a short sending state, then the invites appear in a Pending list with their role and a Revoke action.

### Usage

```tsx
import { InviteMembers } from '@/components/sundae/invite-members'

<InviteMembers />
```

### Props

- `roles` (`string[]`, required): Roles to choose from.
- `onInvite` (`(emails: string[], role: string) => Promise<void>`): Send handler.
- `seatsLeft` (`number`): Optional seat limit.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Workspace onboarding, team settings, sharing dialogs.

### When not to use

- Inviting one person: a single email field is enough.

### Accessibility

- The chip field is a labelled input; chips have remove buttons named with the address.
- Invalid addresses are listed in an alert; sent invites are announced.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- Enter / , / Space: Add address
- Backspace: Remove last address