Email Typo Suggestion

ProNew

Spots common domain typos (gmial.com, hotmial.com, yaho.com), asks "Did you mean ...?" with a button that applies the fix, and never blocks the submit. Use this when a mistyped email means a lost account or a bounced receipt.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

An email is the key to an account or a receipt and a typo costs you the customer.

Do not use it when: Never reject an address because it looks odd; this only suggests. Real validation is the confirmation email.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`domains`	`string[]`	Domains to compare with. Defaults to seven common providers.
`onChange`	`(email) => void`	Called with every new value, including an accepted suggestion.

suggestEmail(email, domains?) is exported and can run on the server too.

Accessibility

The suggestion appears after the field is left, not while typing, in a polite live region next to the field: "Did you mean ada@gmail.com?" with a button named "Use ada@gmail.com".
It is a suggestion, not an error: the input is not marked invalid and the form is never blocked.
The button has the full address in its name, so the action is clear out of context.

Testing

The pattern ships with a Testing Library test (email-typo-suggestion.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.