build69
build69  /  Components  /  Text Inputs  /  EmailInput

EmailInput

v1.0.12Updated 19 Oct 2026

Validated email field with leading mail icon, trailing status pill, RFC 5322 regex, optional domain allowlist / blocklist, Levenshtein typo suggestions against 17 common providers ("Did you mean gmail.com?"), and server-

View source← Back to catalog

Preview

Live · 11 stories
DefaultOpen ↗
▸Why this is recommendedformemailvalidationtypo+4

The default, out-of-the-box EmailInput.

Recommended for+14
  • ✓Signup forms
  • ✓Work-email-only company signups
  • ✓Disposable-inbox blocking
  • ✓Email change flows
Tags+6
formemailvalidationtyporfc5322allowlistblocklistdefault
Features+4
  • RFC 5322 simplified regex validation
  • Domain allowlist + blocklist
  • Levenshtein typo suggestions against 17 common providers
  • Server-side error injection
  • validateOn: on-blur (default) / on-change / on-submit
  • onValidityChange callback
  • i18n: labels prop overrides the typo-suggestion chip strings; validation messages overridable via errorMessages
Not recommended for−2
  • ✕Free-text fields (use Input)
  • ✕Multi-recipient inputs (use TagInput)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "EmailInput" })

Usage

import { EmailInput } from '@/components/inputs/email-input';

<EmailInput
  label="Work email"
  value={email}
  onValueChange={setEmail}
  onValidityChange={setValid}
  blockedDomains={['mailinator.com', 'tempmail.io']}
  suggestCorrections
  required
/>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
value

Controlled value

string—
onValueChange

Value change callback

function—
onValidityChange

Validity + error[] callback

function—
allowedDomains

Domain allowlist

string[]—
blockedDomains

Domain blocklist (throwaway providers)

string[]—
suggestCorrections

Show "Did you mean…" typo fixes

boolean—
validateOn

Validation timing

'on-blur' | 'on-change' | 'on-submit'—
serverError

Forced server-side error

string—
required

Required field

boolean—
labels

Override the built-in UI strings — the "Did you mean {suggestion}?" typo chip and its Apply action (i18n). Merged over DEFAULT_EMAIL_INPUT_LABELS; validation messages stay on errorMessages.

Partial<EmailInputLabels>—
aria-invalid

Mark the field invalid from outside; the box paints the same destructive state as its own validation, with the alert in its own trailing slot (FormField clones this in from its error prop)

boolean—
aria-describedby

Id(s) of outside hint or error text, kept alongside the messages the field owns (FormField clones this in)

string—
aria-required

Mark the input required for assistive tech (FormField clones this in from its required prop)

boolean—
aria-label

Accessible name where the layout has no room for a visible `label` — a filter row, a subscribe box beside its button. Prefer `label`: a visible one names the field for everybody. These components destructure a fixed prop set and used to DROP an aria-label a caller wrote, so such a field announced as nothing but its role.

string—

Related

Platform docsAll componentsSource files