Email Domain Typo Suggest

ProNew

An email field that completes the domain after the @ from a short list and catches near misses like gmial.com with a one-tap fix. Use this when a mistyped address costs you a signup or a receipt.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

value

defaultValue

maxDistance2

label

Guide and examples

When to use it

Use it on sign-up, checkout and newsletter forms, where most addresses end in a handful of providers and a transposed letter means the confirmation mail never arrives.

Do not use it when addresses are internal and the domain is fixed. Ask for the part before the @ only.

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	Default	Description
`value`	`string`	-	The address (controlled).
`defaultValue`	`string`	`""`	Initial address.
`onValueChange`	`(value: string) => void`	-	Runs on every change.
`domains`	`string[]`	8 common providers	Domains to complete to and to compare against.
`maxDistance`	`number`	`2`	Largest edit distance counted as a typo.
`label`	`string`	`Email`	Visible label.

Accessibility

The input is a combobox with aria-autocomplete="list", aria-controls and aria-activedescendant; completions are options in a listbox.
Enter and Tab only accept a completion while the list is open; otherwise they behave normally.
A near-miss domain shows Did you mean name@gmail.com? with a button; it is text first, so it is announced when it appears.
Completions are shown only after the @ and only while the domain is incomplete.

Testing

The pattern ships with a Testing Library test (email-domain-typo-suggest.test.tsx) that covers completing after the @, keyboard acceptance, the typo suggestion and edit distance.