Number input

When to use this component

Use the number input component when you need to let a user enter either a whole number, a decimal number or either.

When not to use this component

Do not use the number input component for any other purpose than allowing users to enter an whole number or decimal number.

There is specific guidance on how to ask for:

How it works

Read the GOV.UK Design System guidance on asking for numbers (opens in a new tab) for information on labels, hint text, and accessibility considerations.

HTML examples

Copy the HTML into your web template. Replace schema-name with your CRM field schema name, keeping any suffixes like -hint. This is required for the CRM helper framework to validate and submit data.

Use the input field above each example to enter your schema name. This updates all instances in the code automatically, ensuring no mistakes that could impact validation or accessibility.

For single question pages

If presenting only one question on the page, designate the contents of the label as the page heading. This practice ensures users of screen readers hear the contents only once.

You will need to include an empty {% title %} block in your web template to remove the default page header and avoid duplication.

What is your age?

Update the HTML example

Replace 'schema-name' by entering your CRM field schema name.

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="schema-name">
      What is your age?
    </label>
  </h1>
  <input class="govuk-input govuk-input--width-5" id="schema-name" name="schema-name" type="text" spellcheck="false" inputmode="numeric">
</div>

Warning This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}

{% block main %}

{% unless user %}
  <script>
    window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
  </script>
{% endunless %}

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="schema-name">
      What is your age?
    </label>
  </h1>
  <input class="govuk-input govuk-input--width-5" id="schema-name" name="schema-name" type="text" spellcheck="false" inputmode="numeric">
</div>

{% endblock %}

For multiple question pages

If presenting more than one question on the page, do not set the contents of the label as the page heading.

Number input for multiple questions

Example
HTML
Web Template

What is your age?

Update the HTML example

Replace 'schema-name' by entering your CRM field schema name.

<div class="govuk-form-group">
  <label class="govuk-label" for="schema-name">
    What is your age?
  </label>
  <input class="govuk-input govuk-input--width-5" id="schema-name" name="schema-name" type="text" spellcheck="false" inputmode="numeric">
</div>

Warning This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block main %}

{% unless user %}
  <script>
    window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
  </script>
{% endunless %}

<div class="govuk-form-group">
  <label class="govuk-label" for="schema-name">
    What is your age?
  </label>
  <input class="govuk-input govuk-input--width-5" id="schema-name" name="schema-name" type="text" spellcheck="false" inputmode="numeric">
</div>

{% endblock %}

Using hint text

Use hint text to provide relevant assistance to the majority of users, such as clarifying how their information will be used or where to locate it. The hint text block is demonstrated in the example below.

Please ensure the following:

Use the hint text block appropriately
Place the hint block correctly within your HTML component
Add the aria-describedby attribute where necessary, for accessiblity. For the email component this is against the input.

Avoid lengthy paragraphs and lists in hint text, as screen readers will read out the entire content, potentially frustrating users. Additionally, refrain from including links within hint text, as screen readers do not indicate that the text is a clickable link.

Number input with hint

Example
HTML
Web Template

What is your account number?

Must be between 6 and 8 digits long

Update the HTML example

Replace 'schema-name' by entering your CRM field schema name.

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="schema-name">
      What is your account number?
    </label>
  </h1>
  <div id="schema-name-hint" class="govuk-hint">
    Must be between 6 and 8 digits long
  </div>
  <input class="govuk-input govuk-input--width-10" id="schema-name" name="schema-name" type="text" spellcheck="false" aria-describedby="schema-name-hint" inputmode="numeric">
</div>

Warning This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}

{% block main %}

{% unless user %}
  <script>
    window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
  </script>
{% endunless %}

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="schema-name">
      What is your account number?
    </label>
  </h1>
  <div id="schema-name-hint" class="govuk-hint">
    Must be between 6 and 8 digits long
  </div>
  <input class="govuk-input govuk-input--width-10" id="schema-name" name="schema-name" type="text" spellcheck="false" aria-describedby="schema-name-hint" inputmode="numeric">
</div>

{% endblock %}

Prefixes and suffixes

Use prefixes and suffixes to help users enter things like currencies and measurements.

Prefixes and suffixes are useful when there's a commonly understood symbol or abbreviation for the type of information you're asking for. Do not rely on prefixes or suffixes alone, because screen readers will not read them out.

If you need a specific type of information, say so in the input label or hint text as well. For example, put 'Cost, in pounds' in the input label and use the '£' symbol in the prefix.

Position prefixes and suffixes are positioned outside of their input to avoid interfering with some browsers that might insert an icon into the input (for example to show or generate a password).

Number with prefix and suffix

Example
HTML
Web Template

What is the cost per item, in pounds?

Update the HTML example

Replace 'schema-name' by entering your CRM field schema name.

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="schema-name">
      What is the cost per item, in pounds?
    </label>
  </h1>
  <div class="govuk-input__wrapper">
    <div class="govuk-input__prefix" aria-hidden="true">£</div>
    <input class="govuk-input govuk-input--width-5" id="schema-name" name="schema-name" type="text" spellcheck="false">
    <div class="govuk-input__suffix" aria-hidden="true">per item</div>
  </div>
</div>

Warning This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}

{% block main %}

{% unless user %}
  <script>
    window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
  </script>
{% endunless %}

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="schema-name">
      What is the cost per item, in pounds?
    </label>
  </h1>
  <div class="govuk-input__wrapper">
    <div class="govuk-input__prefix" aria-hidden="true">£</div>
    <input class="govuk-input govuk-input--width-5" id="schema-name" name="schema-name" type="text" spellcheck="false">
    <div class="govuk-input__suffix" aria-hidden="true">per item</div>
  </div>
</div>

{% endblock %}

Use appropriately-sized inputs

Help users understand what they should enter by making number inputs the right size for the content they're intended for.

By default, the width of number inputs is fluid and will fit the full width of the container they are placed into.

If you want to make the input smaller, you can either use a fixed width input, or use the width override classes to create a smaller, fluid width input.

Asking for a whole number

If you're asking the user to enter a whole number, make sure the inputmode attribute is set to numeric to use the numeric keypad on devices with on-screen keyboards. The examples provided above on this page already have the inputmode="numeric" attribute.

Asking for a decimal number

If you're asking the user to enter a number that might include decimal places, use input type="text".

Do not set the inputmode attribute as it causes some devices to bring up a keypad without a key for the decimal separator. When copying the examples on this page, you will need to remove this attribute from the HTML.

Avoid using inputs with a type of number

Do not use <input type="number"> unless your user research shows that there's a need for it. With <input type="number"> there's a risk of users accidentally incrementing a number when they're trying to do something else - for example, scroll up or down the page. And if the user tries to enter something that's not a number, there's no explicit feedback about what they're doing wrong.

Minimum and maximum

The number component does not use input type="number" so the standard HTML min and max attributes do not apply. Do not use the minlength and maxlength attributes associated with input type="text" either. Browsers will not permit the user to enter more than the characters defined by the value of the maxlength attribute, cutting off the text as-you-type and truncating pasted text. This can lead to bad user experience.

You can use custom attributes which will work with the portal helper validation framework to set the allowed value or length range of a number input.

Minimum and maximum length and minimum and maximum value attributes can be used together, but only when the input is a whole number.

Minimum and maximum value

Use minvalue and maxvalue attributes to set a minimum or maximum value for your input. For example, input maxvalue="10" will prevent the user being able to submit a number greater than 10.

Use the minvalue attribute together with the maxvalue attribute to create a range of allowed values.

Minimum and maximum length

Use minchar and maxchar attributes to set a minimum or maximum length for your input. For example, you may wish to use input minchar="8" maxchar="8" when asking for a bank account number. Will ensure the user can only submit a number of 8 characters in length.

You can use the minchar attribute together with the maxchar attribute to create a range of allowed lengths, as described in the example above, or as individual attributes.

The length attributes can only be used as part of a number component when the input is a whole number.

Error messages

An error message is displayed next to the field and in the error summary when a validation error occurs. The CRM helper framework automatically handles error messages for specific error states.

If nothing is entered and the question is required

'Enter [whatever it is]'. For example, 'Enter your age'.

If the input is not a number

'[whatever it is] must be a number'. For example, 'Age must be a number'.

If the input should be a whole number but contains decimals

'[whatever it is] must be a whole number'. For example, 'Quantity must be a whole number'.

If the input should be a decimal number

'[whatever it is] must be a decimal number'. For example, 'Amount must be a decimal number'.

If the value is too high

'[whatever it is] must be [number] or fewer'. For example, 'Quantity must be 100 or fewer'.

If the value is too low

'[whatever it is] must be [number] or more'. For example, 'Quantity must be 1 or more'.

If the input is too long (whole numbers only)

'[whatever it is] must be [number] characters or less'. For example, 'Reference number must be 8 characters or less'.

If you would like any additional advice or guidance with using these examples on Power Pages, please contact the Solutions Delivery Team.