Email Address

Help user's enter their email address


General email address field

We will only use this for resetting your password
<div class="field">
    <label class="label" for="email">Email Address</label>
    <span class="hint">We will only use this for announcements</span>
    <div class="control">
        <input
            class="input margin--bottom--lg col is-4"
            id="email"
            name="email"
            type="email"
            aria-describedby="email"
            autocomplete="email"
            spellcheck="false"
        />
    </div>
</div>

When you should use this component

Use this component when you need to ask user's for their email address and state clearly what their email address will be used for.


Guidelines

Tell users how their email address will be used

Make it clear to the user what it will be used for. This is so that:

  • users will be confident that you will not abuse their email address
  • users are able to choose which email address they want to use

Make sure it works for all users

A email address can be 256 characters long including punctuation, so do make sure your text field can accomodate the maximum length for email addresses.

Help users along when entering their email addresses

Make it easier for users to enter their email address 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.

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team