A wrapping box of email chips, a role Select and Send. Send waits until every address is valid.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/invite-fieldPlayground
Invites expire after 7 days
Filled
maya@halcyon.exampleliam@halcyon.examplenoah@halcyon.example
3 people will join as Member
Error
maya@halcyon.exampleliam@halcyonnoah@halcyon.example
liam@halcyon is not a valid email
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/invite-field
Accessibility
- The field is labelled and its help text is linked and announced.
- An invalid address is named in the help text, not only outlined in danger.
- Each remove button names the address.
Motion
- Chips scale from 0.96 and fade over 240 ms, and reverse on removal.
- The ring changes over 120 ms.
- With reduced motion, chips appear at once.
Responsive behavior
- Chips wrap at any width.
- The field text is 16 at Mobile width, so iOS does not zoom.
Performance
- Only the chip being added or removed animates, and reduced motion skips it.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import InviteField from @/components/fetaui/invite-field. It composes Select and Button. isEmail and splitEmails are exported.
- Comma, Space, Enter and Tab make chips, as does pasting a list or a whole address, and duplicates are dropped.
- A bad address stays as a chip, is named in the help text and disables Send.
- onSend receives emails and role, and does not clear the field. Pass value and onValueChange to clear it after sending.
Related
Invite TeammatesComponentAn invite panel with a seat bar split by members, pending and new. At the seat limit, the action becomes an upgrade.MembersComponentWorkspace members: seat usage, an invite row, the member list with activity and roles, and pending invites.Member RowComponentOne member: avatar, name and email, last activity, a role Select and a menu. Pending adds Invited and Resend, and Deactivated locks the role.InputComponentThe single line text control: a pill on the tray fill that lifts onto the surface when focused.