Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

View cookies

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

Ask users for Email addresses

Overview

Use the email addresses pattern to ask a user for an email address.

Open this example in a new tab (Example Input Email)

Example Input Email contents

Nunjucks

{% from "components/input/_macro.njk" import onsInput %}
{{
    onsInput({
        "id": "email-example-input-email",
        "type": "email",
        "autocomplete": "email",
        "label": {
            "text": "Email address",
            "description": "This will not be stored and only used once to send your confirmation"
        }
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
idstringtrueThe HTML id of the input. Used for the label’s for attribute.
typestringfalseSets the HTML type attribute for the <input>. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”.
classesstringfalseClasses to add to the input
widthstringfalseRequired width of the input in number of letters or digits. Will also accept a breakpoint suffix, for example, “7@m”.
namestringfalseThe HTML name attribute for the input
valuestring or integerfalseThe HTML value for the input to set a preset value for the field
minintegerfalseThe HTML min attribute to set the minimum accepted number or date for the input (only to be used when type is set to one of date, month, week, time, datetime-local or range)
maxintegerfalseThe HTML max attribute to set the maximum accepted number or date for the input (only to be used when type is set to one of date, month, week, time, datetime-local or range)
minLengthintegerfalseThe HTML minlength attribute to set the minimum accepted length of input value
maxLengthintegerfalseThe HTML maxlength attribute to set the maximum accepted length of input value
attributesobjectfalseHTML attributes (for example, data attributes) to add to the input
labelLabel (ref)falseSettings for the input label. for will automatically be set to match the input id
prefixobject <InputPrefix>falseSettings for the input prefix
suffixobject <InputSuffix>falseSettings for the input suffix
fieldIdstringfalseThe HTML id of the field
fieldClassesstringfalseClasses to add to the field
dontWrapbooleanfalsePrevents the input from being wrapped in a field
mutuallyExclusiveMutuallyExclusive (ref)falseConfiguration object to set if the input has a mutually exclusive opposing option
charCheckLimitobject <CharCheckLimit>falseSettings for a character counter or limit checker on the input
legendstringfalse (unless mutuallyExclusive is set)Text for the mutually exclusive fieldset‘s legend
legendClassesstringfalseClasses to add to the mutually exclusive fieldset‘s legend
legendIsQuestionTitlebooleantrue (unless legend is set)Creates an h1 inside the legend. Use when there is only a single fieldset on the page.
errorError (ref)falseConfiguration for validation errors
autocompletestringfalseThe HTML autocomplete attribute used to specify the purpose of the input or prevent the browser’s native autofill
accessiblePlaceholderbooleanfalseWill use the label provided as an accessible placeholder within the input
searchButtonobject <SearchButton>falseSettings for the search input button
postTextboxLinkTextstringfalseThe text for a link following the input
postTextboxLinkUrlstringfalseThe URL for the HTML href attribute of the link following the textbox
listenersobjectfalseCreates a script element that adds an event listener to the element by id. Takes key { event } and value { function }
InputPrefix/InputSuffix
NameTypeRequiredDescription
textstringtrueThe visible text abbreviation for the prefix or suffix, for example, “cm“
titlestringfalseThe HTML title attribute for the <abbr> element, required if the visible text label is an abbreviation. Use to write out the long form of an abbreviated prefix or suffix. For example, if text is “€”, title should be “Euro (EUR)”.
idstringtrueThe HTML id of the <abbr> element used for the prefix or suffix. Used for the input’s aria-labelledby attribute.
CharCheckLimit
NameTypeRequiredDescription
idstringtrueThe HTML id of the component
limitintegertrueThe maximum number of characters allowed in the input
charCountOverLimitPluralstringtrueThe string displayed when user has entered more than one character over the set limit. Set {x} in the string to be replaced with the number of characters, for example “{x} characters too many”.
charCountOverLimitSingularstringtrueThe string displayed when user has entered one character over the set limit. Set {x} in the string to be replaced with the number of characters, for example “{x} character too many”.
charcheckCountdownbooleanfalseSet to “true” to show the character limit counter as characters are entered into the input
charCountPluralstringtrueThe string displayed when multiple characters can be entered before the limit is reached. Set {x} in the string to be replaced with the number, for example “You have {x} characters remaining”.
charCountSingularstringtrueThe string displayed when only one more character can be entered before the limit is reached. Set {x} in the string to be replaced with the number, for example “You have {x} character remaining”.
SearchButton
NameTypeRequiredDescription
textstringtrueText for the button label
typestringfalseSets the HTML type attribute for the <button>. Can be set to either: “submit” or “reset”. Defaults to “button”.
idstringfalseSets the HTML id attribute for the button
classesstringfalseClasses to add to the button component
iconTypestringfalseAdds an icon to the button, before the label, by setting the icon type
attributesobjectfalseHTML attributes (for example, data attributes) to add to the button component

HTML

<div class="ons-field">
  <label class="ons-label ons-label--with-description" for="email-example-input-email"
    aria-describedby="description-hint">Email address</label>
  <span id="description-hint" class="ons-label__description ons-input--with-description">This will not be stored and
    only used once to send your confirmation</span>
  <input type="email" id="email-example-input-email" class="ons-input ons-input--text ons-input-type__input"
    autocomplete="email" aria-describedby="description-hint" />
</div>

When to use this pattern

Use this pattern when you need to collect an email address from the user.

How to use this pattern

This pattern uses the input component.

When using this pattern you should:

  • tell users why you need an email address and what it will be used for
  • make sure the field can accept all email addresses
  • help users enter an email address in the correct format

Explain why you need the email address

Use the ons-label__description with the input component to reassure users why you need an email address and what it will be used for.

Allow all email addresses

The email address field needs to accommodate the maximum number of characters allowed. An email address can be up to 320 characters long and include a set of special characters as detailed in the RFC 3696 specification from the Internet Engineering Task Force (opens in a new tab) 

How to check email addresses

To help users enter a valid email address, you should:

  • allow them to paste the email address
  • check they have entered something in the email address field
  • check that what they have entered is valid
  • show an error message if they have not entered anything or what they have entered is not valid
  • ask them to confirm it is correct using the check answers pattern

Error messages

Use the correct errors pattern and show the error details above the email address field.

Open this example in a new tab (Example Input Email With Error)

Example Input Email With Error contents

Nunjucks
{% from "components/input/_macro.njk" import onsInput %}
{{
    onsInput({
        "id": "email-example-input-email-with-error",
        "type": "email",
        "autocomplete": "email",
        "value": "name.com",
        "label": {
            "text": "Email address",
            "description": "This will not be stored and only used once to send your confirmation"
        },
        "error": {
            "id": "email-error-example-input-email-with-error",
            "text": "Enter an email address in a valid format, for example, name@example.com"
        }
    })
}}
HTML
<div class="ons-panel ons-panel--error ons-panel--no-title" id="email-error-example-input-email-with-error">
  <span class="ons-panel__assistive-text ons-u-vh">Error: </span>
  <div class="ons-panel__body">
    <p class="ons-panel__error">
      <strong>Enter an email address in a valid format, for example, name@example.com</strong>
    </p>
    <div class="ons-field">
      <label class="ons-label ons-label--with-description" for="email-example-input-email-with-error"
        aria-describedby="description-hint">Email address</label>
      <span id="description-hint" class="ons-label__description ons-input--with-description">This will not be stored and
        only used once to send your confirmation</span>
      <input type="email" id="email-example-input-email-with-error"
        class="ons-input ons-input--text ons-input-type__input ons-input--error" value="name.com" autocomplete="email"
        aria-describedby="description-hint" />
    </div>
  </div>
</div>

If the email address field is empty

Use “Enter an email address”.

If the email address entered is not in a valid format

Use “Enter an email address in a valid format, for example, name@example.com”.

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss the ‘Email addresses’ pattern on GitHub (opens in a new tab) 

Back to top