Recipient Chip Input (To: Field) — Free HTML CSS JS Snippet

Email clients turn a plain text field into a row of chips the moment you commit an address — this snippet reproduces that exact interaction, including per-chip email validation and pasting several comma-separated addresses at once, all in vanilla JavaScript.

Per-chip validation, not just field-level

Every address is tested against EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ the moment its chip is created, and an invalid match adds the rci-invalid class instead of the default styling — turning the chip red rather than silently accepting or rejecting the whole field. This gives immediate, localized feedback: a user pasting five addresses where one is malformed sees exactly which one needs fixing, not a generic field-level error.

Three commit triggers, one shared function

Enter, comma, and Tab all call the same commitInput() function, and Tab's default behavior (moving focus to the next form field) is prevented with e.preventDefault() when there's pending text to commit — so tabbing out of the field always chips the in-progress text first rather than discarding it, matching what users expect from a real "To:" field.

Splitting a paste into multiple chips

The paste handler checks text.indexOf(',') !== -1 before intervening — if the pasted content has no comma, the default paste behavior runs normally (just placing text in the input for further editing), but a comma-separated paste is caught, split, and each piece becomes its own chip immediately: text.split(',').forEach(part => addChip(part)). This is what makes pasting a whole address list from an email client or spreadsheet "just work."

Backspace-to-remove-last-chip

When Backspace is pressed on an empty input (e.key === 'Backspace' && !input.value), the last chip in the field is removed — the same convention used by every major email client's recipient field, letting a user quickly undo the most recent entry without reaching for the mouse.

Click-to-focus on empty space

Clicking anywhere in the field container that isn't a chip or the input itself still focuses the input (if (e.target === field) input.focus()), so the whole field reads as one clickable target even though it's really a flex container of separate chip and input elements.

Customizing it

Swap EMAIL_RE for a stricter or more permissive validation pattern, wire an autocomplete dropdown into the input's keyup handler for suggesting known contacts, or add a max-recipients limit that disables further chip creation.