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.
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 toemail
so that the correct keyboard is displayed -
Setting the
spellcheck
attribute tofalse
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