Email Address

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

Example

Your email will only be used for updates

 
<div class="sgds form-group">
    <label class="form-label" for="email">Email Address</label>
    <span class="form-text">Your email will only be used for updates</span>
    <input class="form-control" type="email" id="email" autocomplete="email" spellcheck="false" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" maxlength="256" placeholder="Enter email" oninput="setValidation()" />
</div>

                

Usage guidelines

Email pattern should be used:
  • When you need to collect a user's email address
Email pattern should not be used:
  • If it is not necessary to ask for a user's email address

Usability guidelines

Explain the rationale of requesting for user's email address
This allows users to:

  • Feel assured that their email address will not be misappropriated
  • Choose which email address they prefer to use

Make sure it works for all users
You text field should accommodate the maximum length of email addresses (256 characters long, including punctuation).

Guide users to enter their email address
Make it easier for users by:

  • Allowing them to copy and paste their email address
  • Setting the type attribute to email so that the correct keyboard is displayed.
  • Setting the spellcheck attribute to false so that their email addresses are not spell checked by the browser or device.
  • Setting the autocomplete attribute to email so that browsers can fill in their email address if they have entered in previously.
  • You will need to include the autocomplete attribute to meet WCAG 2.1 AA for production.

Home


Previous version 2.1.0