Ask users for Numeric values
Overview
Use the numeric values pattern to ask for numeric information such as quantities, financial figures, percentages or units of measurement.
Example Input Numeric Values contents
Nunjucks
{% from "components/input/_macro.njk" import onsInput %}
{{
onsInput({
"id": "number-example-input-numeric-values",
"type": "number",
"width": "2",
"autocomplete": "off",
"label": {
"text": "Number of bedrooms"
}
})
}}
{{
onsInput({
"id": "prefixed-example-input-numeric-values",
"type": "number",
"width": "6",
"autocomplete": "off",
"label": {
"text": "Your annual salary before taxes"
},
"prefix": {
"text": "£",
"title": "British pounds (GBP)",
"id": "annual-salary-gpb-prefix-example-input-numeric-values"
}
})
}}
{{
onsInput({
"id": "suffixed-percent-example-input-numeric-values",
"type": "number",
"width": "3",
"autocomplete": "off",
"label": {
"text": "People with internet access"
},
"suffix": {
"title": "per cent",
"text": "%",
"id": "internet-access-per-cent-suffix-example-input-numeric-values"
}
})
}}
{{
onsInput({
"id": "suffixed-centimetres-example-input-numeric-values",
"type": "number",
"width": "4",
"autocomplete": "off",
"label": {
"text": "Length",
"description": "For example enter 1250 for 12.5m"
},
"suffix": {
"title": "centimetres",
"text": "cm",
"id": "length-cm-suffix-example-input-numeric-values"
}
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the input. Used for the label’s for attribute. |
| type | string | false | Sets the HTML type attribute for the <input>. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”. |
| classes | string | false | Classes to add to the input |
| width | string | false | Required width of the input in number of letters or digits. Will also accept a breakpoint suffix, for example, “7@m”. |
| name | string | false | The HTML name attribute for the input |
| value | string or integer | false | The HTML value for the input to set a preset value for the field |
| min | integer | false | The 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) |
| max | integer | false | The 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) |
| minLength | integer | false | The HTML minlength attribute to set the minimum accepted length of input value |
| maxLength | integer | false | The HTML maxlength attribute to set the maximum accepted length of input value |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the input |
| label | Label (ref) | false | Settings for the input label. for will automatically be set to match the input id |
| prefix | object <InputPrefix> | false | Settings for the input prefix |
| suffix | object <InputSuffix> | false | Settings for the input suffix |
| fieldId | string | false | The HTML id of the field |
| fieldClasses | string | false | Classes to add to the field |
| dontWrap | boolean | false | Prevents the input from being wrapped in a field |
| mutuallyExclusive | MutuallyExclusive (ref) | false | Configuration object to set if the input has a mutually exclusive opposing option |
| charCheckLimit | object <CharCheckLimit> | false | Settings for a character counter or limit checker on the input |
| legend | string | false (unless mutuallyExclusive is set) | Text for the mutually exclusive fieldset‘s legend |
| legendClasses | string | false | Classes to add to the mutually exclusive fieldset‘s legend |
| legendIsQuestionTitle | boolean | true (unless legend is set) | Creates an h1 inside the legend. Use when there is only a single fieldset on the page. |
| error | Error (ref) | false | Configuration for validation errors |
| autocomplete | string | false | The HTML autocomplete attribute used to specify the purpose of the input or prevent the browser’s native autofill |
| accessiblePlaceholder | boolean | false | Will use the label provided as an accessible placeholder within the input |
| searchButton | object <SearchButton> | false | Settings for the search input button |
| postTextboxLinkText | string | false | The text for a link following the input |
| postTextboxLinkUrl | string | false | The URL for the HTML href attribute of the link following the textbox |
| listeners | object | false | Creates a script element that adds an event listener to the element by id. Takes key { event } and value { function } |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The visible text abbreviation for the prefix or suffix, for example, “cm“ |
| 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 “€”, title should be “Euro (EUR)”. |
| id | string | true | The HTML id of the <abbr> element used for the prefix or suffix. Used for the input’s aria-labelledby attribute. |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the component |
| limit | integer | true | The maximum number of characters allowed in the input |
| charCountOverLimitPlural | string | true | The 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”. |
| charCountOverLimitSingular | string | true | The 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”. |
| charcheckCountdown | boolean | false | Set to “true” to show the character limit counter as characters are entered into the input |
| charCountPlural | string | true | The 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”. |
| charCountSingular | string | true | The 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”. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the button label |
| type | string | false | Sets the HTML type attribute for the <button>. Can be set to either: “submit” or “reset”. Defaults to “button”. |
| id | string | false | Sets the HTML id attribute for the button |
| classes | string | false | Classes to add to the button component |
| iconType | string | false | Adds an icon to the button, before the label, by setting the icon type |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the button component |
HTML
<div class="ons-field">
<label class="ons-label" for="number-example-input-numeric-values">Number of bedrooms</label>
<input type="text" id="number-example-input-numeric-values"
class="ons-input ons-input--text ons-input-type__input ons-input-number--w-2" pattern="[0-9]*" inputmode="numeric"
autocomplete="off" />
</div>
<div class="ons-field">
<label class="ons-label" for="prefixed-example-input-numeric-values">Your annual salary before taxes</label>
<span class="ons-input-type ons-input-type--prefix ons-js-input-container-abbr">
<span class="ons-input-type__inner">
<input type="text" id="prefixed-example-input-numeric-values"
class="ons-input ons-input--text ons-input-type__input ons-input-number--w-6"
aria-labelledby="prefixed-example-input-numeric-values annual-salary-gpb-prefix-example-input-numeric-values"
pattern="[0-9]*" inputmode="numeric" autocomplete="off" />
<abbr id="annual-salary-gpb-prefix-example-input-numeric-values" class="ons-input-type__type ons-js-input-abbr"
aria-label="British pounds (GBP)" role="figure" title="British pounds (GBP)">£</abbr>
</span>
</span>
</div>
<div class="ons-field">
<label class="ons-label" for="suffixed-percent-example-input-numeric-values">People with internet access</label>
<span class="ons-input-type ons-js-input-container-abbr">
<span class="ons-input-type__inner">
<input type="text" id="suffixed-percent-example-input-numeric-values"
class="ons-input ons-input--text ons-input-type__input ons-input-number--w-3"
aria-labelledby="suffixed-percent-example-input-numeric-values internet-access-per-cent-suffix-example-input-numeric-values"
pattern="[0-9]*" inputmode="numeric" autocomplete="off" />
<abbr id="internet-access-per-cent-suffix-example-input-numeric-values"
class="ons-input-type__type ons-js-input-abbr" aria-label="per cent" role="figure" title="per cent">%</abbr>
</span>
</span>
</div>
<div class="ons-field">
<label class="ons-label ons-label--with-description" for="suffixed-centimetres-example-input-numeric-values"
aria-describedby="description-hint">Length</label>
<span id="description-hint" class="ons-label__description ons-input--with-description">For example enter 1250 for
12.5m</span>
<span class="ons-input-type ons-js-input-container-abbr">
<span class="ons-input-type__inner">
<input type="text" id="suffixed-centimetres-example-input-numeric-values"
class="ons-input ons-input--text ons-input-type__input ons-input-number--w-4"
aria-labelledby="suffixed-centimetres-example-input-numeric-values length-cm-suffix-example-input-numeric-values"
pattern="[0-9]*" inputmode="numeric" autocomplete="off" aria-describedby="description-hint" />
<abbr id="length-cm-suffix-example-input-numeric-values" class="ons-input-type__type ons-js-input-abbr"
aria-label="centimetres" role="figure" title="centimetres">cm</abbr>
</span>
</span>
</div>When to use this pattern
This pattern should be used when you need to ask the user for numeric values such as:
- the quantity of objects or people (for example, bedrooms, visitors or employees)
- financial figures (for example, salaries, expenditure or turnover)
- estimated percentages (for example, the percentage of female employees)
- volumes and measurements (for example, the size of a workspace)
How to use this pattern
This pattern uses the input component.
Set the type parameter to “number” to add the correct pattern to trigger a numeric keypad on touch devices.
When you are using a description as well as a label on financial inputs, use:
"Enter a value to the nearest thousand. For example, 56,000."
Do not use symbols in combination with text. For example, "£thousand".
! Warning:
Server-side validation on number type input is not currently supported by all browsers (opens in a new tab)
If you are manually using the component’s html, make sure you set the attributes type="text", inputmode="numeric" and pattern="[0-9]*".
Use appropriately sized number inputs
You can use the input width override utility class to set the width of the input when the maximum size of the answer is known. The class won’t limit the number of digits the user can enter, but will help the user understand what they should enter.
Numbers
Example Input Number contents
Nunjucks
{% from "components/input/_macro.njk" import onsInput %}
{{
onsInput({
"id": "number-example-input",
"type": "number",
"width": "2",
"autocomplete": "off",
"label": {
"text": "Number of bedrooms"
}
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the input. Used for the label’s for attribute. |
| type | string | false | Sets the HTML type attribute for the <input>. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”. |
| classes | string | false | Classes to add to the input |
| width | string | false | Required width of the input in number of letters or digits. Will also accept a breakpoint suffix, for example, “7@m”. |
| name | string | false | The HTML name attribute for the input |
| value | string or integer | false | The HTML value for the input to set a preset value for the field |
| min | integer | false | The 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) |
| max | integer | false | The 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) |
| minLength | integer | false | The HTML minlength attribute to set the minimum accepted length of input value |
| maxLength | integer | false | The HTML maxlength attribute to set the maximum accepted length of input value |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the input |
| label | Label (ref) | false | Settings for the input label. for will automatically be set to match the input id |
| prefix | object <InputPrefix> | false | Settings for the input prefix |
| suffix | object <InputSuffix> | false | Settings for the input suffix |
| fieldId | string | false | The HTML id of the field |
| fieldClasses | string | false | Classes to add to the field |
| dontWrap | boolean | false | Prevents the input from being wrapped in a field |
| mutuallyExclusive | MutuallyExclusive (ref) | false | Configuration object to set if the input has a mutually exclusive opposing option |
| charCheckLimit | object <CharCheckLimit> | false | Settings for a character counter or limit checker on the input |
| legend | string | false (unless mutuallyExclusive is set) | Text for the mutually exclusive fieldset‘s legend |
| legendClasses | string | false | Classes to add to the mutually exclusive fieldset‘s legend |
| legendIsQuestionTitle | boolean | true (unless legend is set) | Creates an h1 inside the legend. Use when there is only a single fieldset on the page. |
| error | Error (ref) | false | Configuration for validation errors |
| autocomplete | string | false | The HTML autocomplete attribute used to specify the purpose of the input or prevent the browser’s native autofill |
| accessiblePlaceholder | boolean | false | Will use the label provided as an accessible placeholder within the input |
| searchButton | object <SearchButton> | false | Settings for the search input button |
| postTextboxLinkText | string | false | The text for a link following the input |
| postTextboxLinkUrl | string | false | The URL for the HTML href attribute of the link following the textbox |
| listeners | object | false | Creates a script element that adds an event listener to the element by id. Takes key { event } and value { function } |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The visible text abbreviation for the prefix or suffix, for example, “cm“ |
| 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 “€”, title should be “Euro (EUR)”. |
| id | string | true | The HTML id of the <abbr> element used for the prefix or suffix. Used for the input’s aria-labelledby attribute. |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the component |
| limit | integer | true | The maximum number of characters allowed in the input |
| charCountOverLimitPlural | string | true | The 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”. |
| charCountOverLimitSingular | string | true | The 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”. |
| charcheckCountdown | boolean | false | Set to “true” to show the character limit counter as characters are entered into the input |
| charCountPlural | string | true | The 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”. |
| charCountSingular | string | true | The 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”. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the button label |
| type | string | false | Sets the HTML type attribute for the <button>. Can be set to either: “submit” or “reset”. Defaults to “button”. |
| id | string | false | Sets the HTML id attribute for the button |
| classes | string | false | Classes to add to the button component |
| iconType | string | false | Adds an icon to the button, before the label, by setting the icon type |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the button component |
HTML
<div class="ons-field">
<label class="ons-label" for="number-example-input">Number of bedrooms</label>
<input type="text" id="number-example-input"
class="ons-input ons-input--text ons-input-type__input ons-input-number--w-2" pattern="[0-9]*" inputmode="numeric"
autocomplete="off" />
</div>Prefixed values
Use the prefix.text parameter to specify prefix unit. If using an abbreviation, for example, “£”, use the prefix.title parameter to specify the long form of the unit, for example, “British pounds (GBP)”.
Example Input Number Prefixed contents
Nunjucks
{% from "components/input/_macro.njk" import onsInput %}
{{
onsInput({
"id": "prefixed",
"type": "number",
"width": "6",
"autocomplete": "off",
"label": {
"text": "Your annual salary before taxes"
},
"prefix": {
"title": "British pounds (GBP)",
"text": "£",
"id": "annual-salary-gpb-prefix"
}
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the input. Used for the label’s for attribute. |
| type | string | false | Sets the HTML type attribute for the <input>. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”. |
| classes | string | false | Classes to add to the input |
| width | string | false | Required width of the input in number of letters or digits. Will also accept a breakpoint suffix, for example, “7@m”. |
| name | string | false | The HTML name attribute for the input |
| value | string or integer | false | The HTML value for the input to set a preset value for the field |
| min | integer | false | The 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) |
| max | integer | false | The 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) |
| minLength | integer | false | The HTML minlength attribute to set the minimum accepted length of input value |
| maxLength | integer | false | The HTML maxlength attribute to set the maximum accepted length of input value |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the input |
| label | Label (ref) | false | Settings for the input label. for will automatically be set to match the input id |
| prefix | object <InputPrefix> | false | Settings for the input prefix |
| suffix | object <InputSuffix> | false | Settings for the input suffix |
| fieldId | string | false | The HTML id of the field |
| fieldClasses | string | false | Classes to add to the field |
| dontWrap | boolean | false | Prevents the input from being wrapped in a field |
| mutuallyExclusive | MutuallyExclusive (ref) | false | Configuration object to set if the input has a mutually exclusive opposing option |
| charCheckLimit | object <CharCheckLimit> | false | Settings for a character counter or limit checker on the input |
| legend | string | false (unless mutuallyExclusive is set) | Text for the mutually exclusive fieldset‘s legend |
| legendClasses | string | false | Classes to add to the mutually exclusive fieldset‘s legend |
| legendIsQuestionTitle | boolean | true (unless legend is set) | Creates an h1 inside the legend. Use when there is only a single fieldset on the page. |
| error | Error (ref) | false | Configuration for validation errors |
| autocomplete | string | false | The HTML autocomplete attribute used to specify the purpose of the input or prevent the browser’s native autofill |
| accessiblePlaceholder | boolean | false | Will use the label provided as an accessible placeholder within the input |
| searchButton | object <SearchButton> | false | Settings for the search input button |
| postTextboxLinkText | string | false | The text for a link following the input |
| postTextboxLinkUrl | string | false | The URL for the HTML href attribute of the link following the textbox |
| listeners | object | false | Creates a script element that adds an event listener to the element by id. Takes key { event } and value { function } |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The visible text abbreviation for the prefix or suffix, for example, “cm“ |
| 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 “€”, title should be “Euro (EUR)”. |
| id | string | true | The HTML id of the <abbr> element used for the prefix or suffix. Used for the input’s aria-labelledby attribute. |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the component |
| limit | integer | true | The maximum number of characters allowed in the input |
| charCountOverLimitPlural | string | true | The 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”. |
| charCountOverLimitSingular | string | true | The 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”. |
| charcheckCountdown | boolean | false | Set to “true” to show the character limit counter as characters are entered into the input |
| charCountPlural | string | true | The 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”. |
| charCountSingular | string | true | The 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”. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the button label |
| type | string | false | Sets the HTML type attribute for the <button>. Can be set to either: “submit” or “reset”. Defaults to “button”. |
| id | string | false | Sets the HTML id attribute for the button |
| classes | string | false | Classes to add to the button component |
| iconType | string | false | Adds an icon to the button, before the label, by setting the icon type |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the button component |
HTML
<div class="ons-field">
<label class="ons-label" for="prefixed">Your annual salary before taxes</label>
<span class="ons-input-type ons-input-type--prefix ons-js-input-container-abbr">
<span class="ons-input-type__inner">
<input type="text" id="prefixed" class="ons-input ons-input--text ons-input-type__input ons-input-number--w-6"
aria-labelledby="prefixed annual-salary-gpb-prefix" pattern="[0-9]*" inputmode="numeric" autocomplete="off" />
<abbr id="annual-salary-gpb-prefix" class="ons-input-type__type ons-js-input-abbr"
aria-label="British pounds (GBP)" role="figure" title="British pounds (GBP)">£</abbr>
</span>
</span>
</div>Suffixed values
Use the suffix.text parameter to specify the suffix unit. If using an abbreviation, for example, “cm”, use the suffix.title parameter to specify the long form of the suffix unit, for example, “centimetres”.
Example Input Number Suffixed contents
Nunjucks
{% from "components/input/_macro.njk" import onsInput %}
{{
onsInput({
"id": "suffixed-per-cent",
"type": "number",
"width": "3",
"autocomplete": "off",
"label": {
"text": "People with internet access"
},
"suffix": {
"title": "per cent",
"text": "%",
"id": "internet-access-per-cent-suffix"
}
})
}}
{{
onsInput({
"id": "suffixed-centimetres",
"type": "number",
"width": "4",
"autocomplete": "off",
"label": {
"text": "Length",
"description": "For example enter 1250 for 12.5m"
},
"suffix": {
"title": "centimetres",
"text": "cm",
"id": "length-cm-suffix"
}
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the input. Used for the label’s for attribute. |
| type | string | false | Sets the HTML type attribute for the <input>. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”. |
| classes | string | false | Classes to add to the input |
| width | string | false | Required width of the input in number of letters or digits. Will also accept a breakpoint suffix, for example, “7@m”. |
| name | string | false | The HTML name attribute for the input |
| value | string or integer | false | The HTML value for the input to set a preset value for the field |
| min | integer | false | The 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) |
| max | integer | false | The 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) |
| minLength | integer | false | The HTML minlength attribute to set the minimum accepted length of input value |
| maxLength | integer | false | The HTML maxlength attribute to set the maximum accepted length of input value |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the input |
| label | Label (ref) | false | Settings for the input label. for will automatically be set to match the input id |
| prefix | object <InputPrefix> | false | Settings for the input prefix |
| suffix | object <InputSuffix> | false | Settings for the input suffix |
| fieldId | string | false | The HTML id of the field |
| fieldClasses | string | false | Classes to add to the field |
| dontWrap | boolean | false | Prevents the input from being wrapped in a field |
| mutuallyExclusive | MutuallyExclusive (ref) | false | Configuration object to set if the input has a mutually exclusive opposing option |
| charCheckLimit | object <CharCheckLimit> | false | Settings for a character counter or limit checker on the input |
| legend | string | false (unless mutuallyExclusive is set) | Text for the mutually exclusive fieldset‘s legend |
| legendClasses | string | false | Classes to add to the mutually exclusive fieldset‘s legend |
| legendIsQuestionTitle | boolean | true (unless legend is set) | Creates an h1 inside the legend. Use when there is only a single fieldset on the page. |
| error | Error (ref) | false | Configuration for validation errors |
| autocomplete | string | false | The HTML autocomplete attribute used to specify the purpose of the input or prevent the browser’s native autofill |
| accessiblePlaceholder | boolean | false | Will use the label provided as an accessible placeholder within the input |
| searchButton | object <SearchButton> | false | Settings for the search input button |
| postTextboxLinkText | string | false | The text for a link following the input |
| postTextboxLinkUrl | string | false | The URL for the HTML href attribute of the link following the textbox |
| listeners | object | false | Creates a script element that adds an event listener to the element by id. Takes key { event } and value { function } |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The visible text abbreviation for the prefix or suffix, for example, “cm“ |
| 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 “€”, title should be “Euro (EUR)”. |
| id | string | true | The HTML id of the <abbr> element used for the prefix or suffix. Used for the input’s aria-labelledby attribute. |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | true | The HTML id of the component |
| limit | integer | true | The maximum number of characters allowed in the input |
| charCountOverLimitPlural | string | true | The 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”. |
| charCountOverLimitSingular | string | true | The 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”. |
| charcheckCountdown | boolean | false | Set to “true” to show the character limit counter as characters are entered into the input |
| charCountPlural | string | true | The 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”. |
| charCountSingular | string | true | The 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”. |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the button label |
| type | string | false | Sets the HTML type attribute for the <button>. Can be set to either: “submit” or “reset”. Defaults to “button”. |
| id | string | false | Sets the HTML id attribute for the button |
| classes | string | false | Classes to add to the button component |
| iconType | string | false | Adds an icon to the button, before the label, by setting the icon type |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the button component |
HTML
<div class="ons-field">
<label class="ons-label" for="suffixed-per-cent">People with internet access</label>
<span class="ons-input-type ons-js-input-container-abbr">
<span class="ons-input-type__inner">
<input type="text" id="suffixed-per-cent"
class="ons-input ons-input--text ons-input-type__input ons-input-number--w-3"
aria-labelledby="suffixed-per-cent internet-access-per-cent-suffix" pattern="[0-9]*" inputmode="numeric"
autocomplete="off" />
<abbr id="internet-access-per-cent-suffix" class="ons-input-type__type ons-js-input-abbr" aria-label="per cent"
role="figure" title="per cent">%</abbr>
</span>
</span>
</div>
<div class="ons-field">
<label class="ons-label ons-label--with-description" for="suffixed-centimetres"
aria-describedby="description-hint">Length</label>
<span id="description-hint" class="ons-label__description ons-input--with-description">For example enter 1250 for
12.5m</span>
<span class="ons-input-type ons-js-input-container-abbr">
<span class="ons-input-type__inner">
<input type="text" id="suffixed-centimetres"
class="ons-input ons-input--text ons-input-type__input ons-input-number--w-4"
aria-labelledby="suffixed-centimetres length-cm-suffix" pattern="[0-9]*" inputmode="numeric" autocomplete="off"
aria-describedby="description-hint" />
<abbr id="length-cm-suffix" class="ons-input-type__type ons-js-input-abbr" aria-label="centimetres" role="figure"
title="centimetres">cm</abbr>
</span>
</span>
</div>How to check numeric input
To help users enter valid input, you should:
- allow them to paste the number
- check they have entered something in the number 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
Error messages
Use the correct errors pattern and show the error details above the number field.
Example Input Number Suffixed With Error contents
Nunjucks
{% from "components/input/_macro.njk" import onsInput %}
{{
onsInput({
"id": "percentage",
"type": "number",
"width": "3",
"autocomplete": "off",
"value": "six",
"label": {
"text": "People with internet access"
},
"suffix": {
"title": "per cent",
"text": "%",
"id": "internet-access-per-cent-suffix"
},
"error": {
"id": "percentage-error",
"text": "Enter a number, for example, 6"
}
})
}}
HTML
<div class="ons-panel ons-panel--error ons-panel--no-title" id="percentage-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, for example, 6</strong>
</p>
<div class="ons-field">
<label class="ons-label" for="percentage">People with internet access</label>
<span class="ons-input-type ons-js-input-container-abbr">
<span class="ons-input-type__inner">
<input type="text" id="percentage"
class="ons-input ons-input--text ons-input-type__input ons-input--error ons-input-number--w-3"
aria-labelledby="percentage internet-access-per-cent-suffix" value="six" pattern="[0-9]*"
inputmode="numeric" autocomplete="off" />
<abbr id="internet-access-per-cent-suffix" class="ons-input-type__type ons-js-input-abbr"
aria-label="per cent" role="figure" title="per cent">%</abbr>
</span>
</span>
</div>
</div>
</div>If any of the number fields are empty
Use “Enter [whatever the numeric value is]”.
For example, “Enter the percentage of people with internet access”.
If what is entered in one of the fields is not a number
Use “Enter a number, for example, [appropriate number]”.
For example, “Enter a number, for example, 7”.
If what is entered in one of the fields is above the maximum value for that field
Use “Enter a number that is less than [whatever the maximum is]”.
For example, “Enter a number that is less than 101” for percentages.
If what is entered in one of the fields is below the minimum value for that field
Use “Enter a number that is greater than [whatever the maximum is]”.
For example, “Enter a number that is greater than 10”.
If what is entered is not within the required range for that field set
Use “Enter a number that is between [whatever the minimum is] and [whatever the maximum is]”.
For example, “Enter a number that is between 1 and 10”.
Help improve this page
Let us know how we could improve this page, or share your user research findings. Discuss the ‘Numeric values’ pattern on GitHub (opens in a new tab)