# Invite Field

A wrapping box of email chips, a role Select and Send. Send waits until every address is valid.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/invite-field
```

## Usage

```tsx
import { InviteField } from '@/components/fetaui/invite-field'

export function Example() {
  return <InviteField onSend={(emails, role) => invite(emails, role)} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| value, defaultValue | string[] | [] |
| onValueChange | (emails) => void |  |
| roles | string[] | Admin, Member, Viewer |
| defaultRole | string | Member |
| label | string | Invite by email |
| placeholder | string |  |
| help | string | Invites expire after 7 days |
| sendLabel | (count) => string |  |
| onSend | (emails, role) => void |  |
| animated | boolean | true |

## When to use

- To invite several people at once by email.

## When not to use

- For one address: use Input.
- When seats are limited: use Invite Teammates.

## 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.