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.

---

Usage

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

Email Address 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">
        <input
            class="input margin--bottom--lg col is-4"
            id="email"
            name="email"
            type="email"
            aria-describedby="email"
            autocomplete="email"
            spellcheck="false"
        />
    </div>
</div>

---

Guidelines

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