# XWUIMailRecipientInput

A tokenized recipient field that renders each address in `data.recipients` as a removable pill (showing `Name <email>` or the bare email, with a `×` remove button) followed by a text input. Typing an address and pressing Enter, comma, semicolon, or Tab validates it and adds a token; an empty Backspace pops the last token; and when the typed value isn't a valid email the optional `data.suggest(query)` autocomplete is consulted and its first hit is added. Every mutation fires `data.onChange(recipients)` and updates `data.recipients`; `conf_comp` supplies the `label` (default `"To"`) and `placeholder` (default `"Add recipient…"`). It is the To/Cc/Bcc field composed by `XWUIMailComposer`.

## Usage

```ts
import { XWUIMailRecipientInput } from '@exonware/xwui/industry/email';

new XWUIMailRecipientInput(
  document.getElementById('app')!,
  {
    recipients: [{ email: 'alex@example.com', name: 'Alex Rivera' }],
    suggest: async (q) => [{ email: 'sarah@example.com', name: 'Sarah Lee' }],
    onChange: (recipients) => console.log(recipients),
  },
  { label: 'To', placeholder: 'Add recipient…' },
);
```

## Basic Usage

A To field seeded with one recipient pill plus an input to add more.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A To field seeded with one recipient pill plus an input to add more.
```

## Autocomplete suggestions

A Cc field with a suggest() callback that resolves directory matches.

```example
file: examples/Autocomplete.ts
html: examples/Autocomplete.html
title: Autocomplete suggestions
description: A Cc field with a suggest() callback that resolves directory matches.
```

## Pre-filled with several recipients

A Bcc field already holding multiple pills, each removable.

```example
file: examples/PreFilledMany.ts
html: examples/PreFilledMany.html
title: Pre-filled with several recipients
description: A Bcc field already holding multiple pills, each removable.
```

```api
```