Email addresses

Follow this pattern when you need to ask users for their email address.

When to use this pattern

Only ask for an email address if you genuinely need it. Consider what you'll use it for:

• sending confirmation emails
• account creation and login
• correspondence about an application
• subscription to updates

How it works

Basic email input

<div class="form-group">
  <label class="form-label" for="email">Email address</label>
  <input
    class="form-input"
    id="email"
    type="email"
    autocomplete="email"
    spellcheck="false"
    autocapitalize="none"
  >
</div>

With hint text

Add hint text to explain what you'll use the email for.

<div class="form-group">
  <label class="form-label" for="email">Email address</label>
  <span class="form-hint">
    We'll only use this to send you a confirmation of your application.
  </span>
  <input class="form-input" id="email" type="email" autocomplete="email">
</div>

Email confirmation

Consider asking users to confirm their email address if it's critical to your service.

Error messages

If email is empty

"Enter your email address"

If email format is invalid

"Enter an email address in the correct format, like name@example.com"

If confirmation email doesn't match

"Email addresses do not match"

Accessibility

• Use type="email" to trigger email-optimised keyboards on mobile
• Use autocomplete="email" for autofill
• Set spellcheck="false" to prevent spell-check interference
• Set autocapitalize="none" to prevent automatic capitalisation on mobile

Validation

Be generous with email validation. The only way to truly validate an email address is to send an email to it. On the client side:

• Check for an @ symbol
• Check for at least one character before and after the @
• Do not enforce specific domain formats
• Allow + characters and subdomains