Use up and down keys to navigate results once you've typed more than two characters. Use the enter key to select a result. Touch device users, explore by touch or with swipe gestures.
Error details
Use the error details component to show validation errors by wrapping form inputs and fieldsets.
{% 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
}
}) }}
HTML attributes (for example, data attributes) to add to the element
error
boolean
false
If set to true will style this specific field as if it has an error
InputSuffix
Name
Type
Required
Description
text
string
true
The visible text label for the prefix or suffix, for example, “Minutes“
title
string
false
The 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”.
id
string
true
The HTML id of the element used for the prefix or suffix. Used for the input’s aria-labelledby attribute.
HTML
<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>
</p>
<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="address-time-hours-suffix"
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=""
role="figure">Hours</span>
</span>
</span>
</div>
<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="address-time-minutes-suffix"
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=""
role="figure">Minutes</span>
</span>
</span>
</div>
</div>
</fieldset>
</div>
</div>
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.