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.
Form elements Error details
Use the error details component to show validation errors by wrapping form inputs and fieldsets.
{% 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
[object Object]undefined
[object Object]
[object Object]undefined
[object Object]
[object Object]undefined
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.