Multi Email Input — Recipient Chips HTML CSS JS

Any "invite teammates," "share with," or "CC" field needs to accept several email addresses and treat each as a distinct, removable token — not a comma-soup string the user has to edit by hand. This snippet builds that multi-email recipient input in plain HTML, CSS, and vanilla JavaScript: type or paste addresses, each becomes a chip, invalid ones are flagged in red, duplicates are dropped, and the send button gates on a clean list.

Chips instead of a comma string

As the user types and presses Enter, comma, or semicolon, the current text is committed as a chip. Each chip shows the address with a remove (✕) button, so editing the list means clicking one token — not finding and deleting the right substring in a long comma-separated value. This is the interaction pattern everyone knows from email clients' To/CC fields, and it's far less error-prone than a raw text field for entering several values.

Paste a whole list, get a whole list

The most valuable behavior is paste handling: commit() splits the input on commas, semicolons, spaces, *and* newlines, so pasting "[email protected], [email protected]; [email protected]" or a column of addresses copied from a spreadsheet instantly becomes three chips. This is the difference between a usable invite field and one where the user has to add addresses one at a time — and it's the feature most hand-built multi-inputs forget.

Per-chip validation, not all-or-nothing

Each address is validated against a pragmatic email regex as it's added, and invalid ones render as red chips you can see and fix individually rather than a single "one or more emails are invalid" error that doesn't tell you which. The send button disables while any invalid chip exists and shows the valid count ("Send 3 invites"), and the hint line names exactly how many are wrong. Validating per-token is what lets the user correct a single typo'd address in a list of twenty without re-entering everything.

Dedupe and backspace-to-edit

Adding an address that's already present is silently ignored (case-insensitively), so pasting overlapping lists doesn't create duplicate invites. And pressing Backspace in an empty input removes the last chip — the standard quick-edit gesture from real recipient fields — so correcting the most recent entry doesn't require reaching for the mouse.

Focus and click behavior that feels native

The whole box acts like one input: clicking anywhere in it (including the empty space around the chips) focuses the text field, and a focus ring wraps the entire control rather than just the inner input, so it reads as a single cohesive field. A pending value is also committed on blur, so clicking away doesn't silently lose a half-typed address.

Accessible and ready to wire up

Each remove button has an aria-label, chips carry the full address as a title for truncated values, and the component exposes the clean valid list on send — the single hook where you'd POST the invites to your API. For full accessibility you'd announce additions/removals via an ARIA live region (covered in the FAQs), but the structure is correct and keyboard-operable from the start.