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.

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 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

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" 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
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" 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
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" 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
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" 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)