Cookies on

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.

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

Error details

Use the error details component to show validation errors by wrapping form inputs and fieldsets.

Example Duration Error For Single Field contents


{% from "components/question/_macro.njk" import onsQuestion %}
{% from "components/duration/_macro.njk" import onsDuration %}

{{ onsDuration({
    "id": "travel-time",
    "legendOrLabel": 'How long do you spend travelling to and from work each day?',
    "legendClasses": 'ons-u-vh',
    "error": {
        "text": "Enter a number of minutes that is less than 60",
        "id": "duration-error"
    "field1": {
        "id": "travel-time-hours",
        "name": "travel-time-hours",
        "suffix": {
            "text": "Hours",
            "id": "address-time-hours-suffix"
        "value": "2"
    "field2": {
        "id": "travel-time-minutes",
        "name": "travel-time-minutes",
        "suffix": {
            "text": "Minutes",
            "id": "address-time-minutes-suffix"
        "value": "60",
        "error": true
}) }}

Nunjucks macro options

field1Object<DurationField>trueSettings for the first duration field
field2Object<DurationField>falseSettings for the second duration field
idstringfalseThe HTML id attribute for the field. Applied if only a single field is used
dontWrapbooleanfalsePrevents the date inputs from being wrapped in the fieldset component
legendIsQuestionTitlebooleanfalseCreates an h1 inside the legend. Use when the duration is the only fieldset on the page
mutuallyExclusiveMutuallyExclusive (ref)falseSettings object if the duration is a mutually exclusive answer
legendOrLabelstringtrueText content for the <legend>. If only a single field is used, a <label> is created using the value from this parameter
legendClassesstringfalseClasses for the <legend>
descriptionstringfalseThe hint text for the duration fields
errorError (ref)falseSettings for validation errors for the whole component
idstringfalseThe HTML id attribute for the input
namestringfalseThe HTML name attribute for the input
valuestringfalseThe HTML value for the input to set a preset value for the field
suffixobject <InputSuffix>trueSettings for the input suffix
attributesobjectfalseHTML attributes (for example, data attributes) to add to the element
errorbooleanfalseIf set to true will style this specific field as if it has an error
textstringtrueThe visible text label for the prefix or suffix, for example, “Minutes“
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 “mins”, title should be “Minutes”.
idstringtrueThe HTML id of the element used for the prefix or suffix. Used for the input’s aria-labelledby attribute.


<div class="ons-panel ons-panel--error ons-panel--no-title" id="duration-error">
  <span class="ons-panel__assistive-text ons-u-vh">Error: </span>
  <div class="ons-panel__body">
    <p class="ons-panel__error">
      <strong>Enter a number of minutes that is less than 60</strong>
    <fieldset id="travel-time" class="ons-fieldset">
      <legend class="ons-fieldset__legend ons-u-vh"><span class="ons-fieldset__legend-title ons-u-pb-no">How long do you
          spend travelling to and from work each day?</span></legend>
      <div class="ons-field-group">
        <div class="ons-field">
          <span class="ons-input-type ons-js-input-container-abbr">
            <span class="ons-input-type__inner">
              <input type="text" id="travel-time-hours"
                class="ons-input ons-input--text ons-input-type__input ons-input-number--w-2"
                aria-labelledby="travel-time-hours address-time-hours-suffix" name="travel-time-hours" value="2"
                pattern="[0-9]*" inputmode="numeric" />
              <span id="address-time-hours-suffix" class="ons-input-type__type ons-js-input-abbr" aria-label=""
        <div class="ons-field">
          <span class="ons-input-type ons-js-input-container-abbr">
            <span class="ons-input-type__inner">
              <input type="text" id="travel-time-minutes"
                class="ons-input ons-input--text ons-input-type__input  ons-input--error ons-input-number--w-2"
                aria-labelledby="travel-time-minutes address-time-minutes-suffix" name="travel-time-minutes" value="60"
                pattern="[0-9]*" inputmode="numeric" />
              <span id="address-time-minutes-suffix" class="ons-input-type__type ons-js-input-abbr" aria-label=""

There is specific guidance on how to correct errors.

How to use this component

You should not typically need to “call” the onsError() macro yourself as it is already called from within form input components, and can be set using the error object.

However, if you need to create a pattern or component that requires an error you can use Nunjucks' call functionality (opens in a new tab) 


The text describing the error
The HTML id attribute that the error summary link can anchor to
HTML attributes (for example, data attributes) to add to the field

Help improve this page

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