Number input

When to use this component

Use the number input component when you need users to enter a whole number or decimal number.

When to not use this component

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

There is specific guidance on how to ask for:

How it works

All number inputs must have labels, and in most cases the label should be visible.

Labels are aligned above the number input they refer to. They should be short, direct and written in sentence case. Do not use colons at the end of labels.

Refrain from using placeholder text instead of labels or for hints/examples. Placeholder text can disappear as soon as users start typing, potentially causing issues for users with memory conditions or when reviewing answers. Additionally, not all screen readers read placeholder text, and its default browser styles may not meet minimum contrast requirements.

HTML examples

Select the appropriate example from this page and directly integrate the HTML into your web template. You can customise these examples to align with your specific requirements, as indicated below. Refer to the layouts section for further guidance on structuring your web template.

If the component requires submission to a CRM field, ensure to replace the placeholder schema-name text in the HTML example with the actual target field schema name. Retain any prefixed or suffixed text related to the schema name. For instance, if the id attribute reads schema-name-hint in the example, ensure the replacement maintains the -hint suffix (e.g. dfe_field-hint).

This step is crucial for allowing the CRM helper framework to validate and submit data to CRM.

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.

For multiple question pages

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

Using hint text

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

Prefixes and suffixes

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

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, therefore you do not need to add any additional error containers to your HTML. Refer to the CRM helper framework guide to understand how to validate your front-end data.

Ensure that your component HTML and your inputs validation JavaScript object are structured correctly for your component type.

Occasionally you may wish to employ error messages outside of the validation process. You can read about the functions available within the CRM helper framework to assist you with this.

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