Type an email + Enter to turn it into a removable chip. Plus suggestion dropdown with autocomplete and email validation. The Gmail "To:" pattern.
An input that accumulates multiple values as little chips you can edit or remove individually. Typing a value and pressing Enter (or comma) turns the text into a chip; pressing Backspace on an empty input removes the last chip. Often paired with an autocomplete dropdown so users can pick from teammates / tags / cities instead of typing each one. Email recipients, hashtags, post tags, multi-select filters.
A flex container that holds the chips AND an inline <input>. Listen for keydown on the input: Enter or "," → add a chip from current value, clear input. Backspace on empty input → remove last chip. Each chip is a pill with an × button. For autocomplete, as user types, filter a candidate list and show a dropdown below the field. Arrow keys move highlight; Enter selects. Validate each chip (e.g., email regex) and mark invalid ones with a red style.
Try the first field: type and press Enter, type "han" to see suggestions, press Backspace on empty to remove the last chip. Second field is colored category tags.
Build a chip / tag input component (Gmail "To:" pattern). Container: padding:8px, border-radius:12px, flex-wrap:wrap, gap:6px, position:relative. focus-within state grows the border to accent + adds glow shadow. Chips: pill-shaped (border-radius:999px, padding:6px 12px on left, 6px on right), each with a tiny circular × button that hovers red. Add a new-chip insertion animation (scale 0.85→1 + opacity 0→1, 0.18s spring). Inline input element: transparent background, no border/outline, flex:1, min-width:140px. Keyboard: pressing Enter or "," commits the current input value to a new chip and clears the input; Backspace on EMPTY input removes the last chip. Validate emails with a regex — mark invalid chips with a red-tinted background and red × button. Add an absolutely-positioned suggestion dropdown below the input that appears as the user types and matches existing candidates (show avatar + name + email). Arrow keys move .active highlight, Enter picks. Second variant: tag categories with 4 color classes that cycle as new tags are added (cat-1 violet, cat-2 pink, cat-3 cyan, cat-4 amber).