<labelclass="govuk-label"for="email">
Email address
</label><divid="email-hint"class="govuk-hint">
We’ll only use this to send you a receipt
</div><inputclass="govuk-input"id="email"name="email"type="email"spellcheck="false"aria-describedby="email-hint"autocomplete="email"></div>
<labelclass="govuk-label"for="email">
Email address
</label><divid="email-hint"class="govuk-hint">
We’ll only use this to send you a receipt
</div><inputclass="govuk-input"id="email"name="email"type="email"spellcheck="false"aria-describedby="email-hint"autocomplete="email"></div>
Help your users to enter a valid email address by:
checking they have entered the correct format
allowing users to paste the email address
setting the type attribute to email so that devices display the correct keyboard
setting the spellcheck attribute to false so that browsers do not spellcheck the email address
confirming their address back to them so they can check and change it
You should also set the autocomplete attribute to email. This lets browsers autofill the email address on a user's behalf if they’ve entered it previously.
If you are working in production you’ll need to do this to meet WCAG 2.1 Level AA. You will not normally need to use the autocomplete attribute in prototypes, as users will not generally be using their own devices.
The field should be wide enough for most users to see their entire email address once they have entered it. A good rule of thumb is to make sure you can see at least 30 characters at once. You can analyse your user data to refine this.
You can check for common misspellings of popular email providers, for example ‘homtail.com’ instead of ‘hotmail.com’. Warn users if you detect one, but allow them to proceed in case it’s a genuine email address.
Some services ask users to repeat their email address. Only do this if your user research shows it to be effective.
Check the user has access to their email account
If email is an essential part of your service - for example to send a password reset - you can confirm whether the user has access to the email address they give you using an email confirmation loop.
However, these are disruptive and should be avoided as far as possible.
<labelclass="govuk-label"for="email">
Email address
</label><divid="email-hint"class="govuk-hint">
We’ll only use this to send you a receipt
</div><pid="email-error"class="govuk-error-message"><spanclass="govuk-visually-hidden">Error:</span> Enter an email address in the correct format, like name@example.com
</p><inputclass="govuk-input govuk-input--error"id="email"name="email"type="email"spellcheck="false"value="Not an email address"aria-describedby="email-hint email-error"autocomplete="email"></div>
{{ govukInput({
label: {
text: "Email address"
},
hint: {
text: "We’ll only use this to send you a receipt"
},
id: "email",
name: "email",
type: "email",
value: "Not an email address",
autocomplete: "email",
errorMessage: {
text: "Enter an email address in the correct format, like name@example.com"
},
spellcheck: false
}) }}
Make sure errors follow the guidance in error message and have specific error messages for specific error states.
If the email address is not in the correct format and there is no example
Say ‘Enter an email address in the correct format, like name@example.com’.
If the email address is not in the correct format and there is an example
Say ‘Enter an email address in the correct format’.
Help improve this pattern
To help make sure that this page is useful, relevant and up to date, you can: