MDS Assistant is an experiment.
Hi, I'm the MDS Assistant and can help you with information from our guidelines and components.

I do not provide code and development guidance. For coding assistance, please check out our experimental MCP server.

Number Stepper

A number stepper allows the user to pick a small number by increasing, decreasing or entering a numerical value.

Best practice

  • Use a number stepper when the expected input is a fairly small whole number.
  • Choose an appropriate default value based on the use case.
  • Carefully consider and define the appropriate range (and step) of valid entries.
  • Provide a short and meaningful label letting the user know what they are changing the value of.
  • The label should describe what to input and not how.
  • Use natural language and use the terms that the user would expect.
  • Don’t use verbs like enter, add, input etc in the label.
  • Don’t add a colon ( : ) at the end of the label.
  • Use the help text to provide additional context and explanation.

We recommend that you read our form design guidelines. The Guidelines cover many basic recommendations to be taken into consideration when working with forms.

When to use

Only use a number stepper if the expected input:

  • Is a fairly small whole number (i.e. 0-10)
  • Doesn’t contain letters, slashes, minus signs, decimal points and does not have a leading zero

In any other case it’s safer to use a regular text input field and possibly adding the ‘pattern’ attribute’ to trigger the numeric keyboard on iOS.

Do
Do use the number stepper for numbers like this:
  • 1
  • 3
  • 7
  • 0
Don't
Do not use the number stepper for these types of numbers/numerals:
  • 01
  • -5
  • 12.5
  • 1250

Default value

The number stepper should always have a default value. Depending on the context this could be:

  • 0
  • 1
  • The most frequently entered value

Range & step

By default the stepper allows a user to enter a value in the range between 0 (min) and 10 (max) with increments of 1 (step). However, these can be adjusted to fit the use case at hand.

Min (minimum)

Defines the smallest valid entry (min is usually 0 or 1).

Max (maximum)

Defines the largest valid entry. Make sure not to restrict large entries if there’s even a small probability of users wanting to choose a large value.

Step

Defines the valid values within the range and determines the increment with which the value will change when the user presses the buttons (step is usually 1).

Changing the step to anything other than 1 (e.g. 0.1 or 50) can lead to usability issues since users:

  • Won’t know what to expect up front.
  • Might have to press the buttons many times to reach the desired value.
  • Might want to enter a value between the steps.

Label

By default, the component has a top-positioned label. It is possible to change the position of the label to be left-positioned. We recommend that you use the top-positioned labels wherever possible, especially in forms. You can read more about why we recommend top-positioned labels in our form guidelines.

For information on how to write good and consistent labels - see our Label Guidelines.