Version
has been released! Read the upgrade guide

Number input

The documentation on this page is considered legacy.

We will be updating this content to our new principle-based format in the near future.

Overview

The Number Input component is a field input that only accepts numbers and can be stepped with the additional arrows.

1Usage

The Number Input allows the user to step between predetermined values. They can also manually enter a number into the input.

The Number Input should stand out and be easily discoverable by users. The text label should be concise, effectively communicating to the user the range or value required.

2Anatomy

  1. Label. The Label should be used to describe to the user what the desired input should be. Every field should have a text label. The label should always be visible on all inputs, excluding search bars.

  2. User Input. The main area in which the user enters a value.

  3. Directional Buttons. The Directional buttons step between predetermined values.

  4. Container. The Container wraps the entire component.

3Sizing & Spacing

The Number Input is only available in one size. It has been created in relation to other inputs, so it will line up correctly in forms.

4States

The Number Input has two states - Default and Focused.

The Directional Buttons also have state. Clicking on the up arrow will increase the entered value, and clicking the down arrow will decrease the value.

The MOD.UK Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright