Inputs
v1.0.0Added in 1.5.0
An email field for one address or a list of recipients, with domain completion, typo hints, contacts and validation.
One address: type a name and after the @ a list completes the domain (emma@gm offers emma@gmail.com); Arrow Down and Up move through it, Enter or Tab takes the highlighted address, Escape closes it. Leaving the field checks the address: a malformed one shows the error, a likely typo shows "Did you mean emma@gmail.com?" with the fix as a button, and a valid one gets a green check. The error goes away as soon as the text is fixed. With multiple, every address becomes a chip with the person's initials or photo: type and press Enter, a comma, a semicolon or a space after a full address; pick a contact from the list by name or address; or paste a whole list like Emma Carter <emma@acme.com>, liam@acme.com; olivia@acme.com and every entry becomes a chip with its name, duplicates once (the existing chip pulses). A bad address stays as a red chip and the field says why; a likely typo turns its chip amber and the hint fixes it in one tap. Backspace in the empty text brings the last chip back as text to fix. Arrow Left at the start of the text moves onto the chips: Left and Right walk, Home and End jump, Delete or Backspace removes, Enter or F2 (or a double-click, or a second tap) edits, Cmd/Ctrl+C copies Name <address>, Escape returns to the text. Cmd/Ctrl+Enter adds the text and submits the form. On a phone the keyboard shows the email layout, text is 16px so iOS never zooms, the chip × buttons have a large touch area and the list stays in the page above the keyboard.
npx wingo-ui@latest add email-inputPro item: the CLI needs a Pro account. See plans
Start your 14-day free trial
""
+typos+check
Type emma@gm and press Tab, or try emma@gmial.com and leave the field.Type emma@gm, or try emma@gmial.com