SGDS v2.0 is here!
Check out the brand new v2.0 portal or click here for more information

Email address input

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

Note: State clearly what their email address will be used for.


Below you will find a General Email Address you can use, along with the code needed to build this element.

Your email would be used for announcements
<div class="field">
    <label class="label" for="email">Email Address</label>
    <span class="hint">Your email would be used for announcements</span>
    <div class="control">
            class="input margin--bottom--lg col is-4"


Explain the rationale of requesting for users’ 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

  • Your field text 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 so that browsers can fill in their email address if they have entered it previously
  • You will need to include the autocomplete attribute to meet WCAG 2.1 AA for production.

Can't find a component?

Let us know what you need and we’ll be happy to look into it

Request component