Numbers and Numeric Ranges
Last updated: September 14, 2015 at 13:54 pm

The options for entering numbers and ranges include open text fields, range sliders, select lists, and numeric steppers.

Visual example of the element:

What problem does this element or pattern solve?
Often the best entry method may be determined by the context of the response needed, as well as the input device (touch, mouse or keyboard). Because of this, care should be taken to define the approved entry methods as well as the rules surrounding when each should be used.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web, Desktop App, Tablet App, Smartphone App

An example of this element or pattern in production:

Detailed specifications

Specifications To Consider

  • Will you have wildly different numeric ranges in your forms that may require completely different input formats? For example, a hotel convention reservation system may need to ask the total number of event days (generally a single digit number) and the estimated number of convention attendees (which could be in the tens of thousands). In cases like this, you should consider multiple numeric input standards based upon quantity range.
  • Can your numeric fields offer more than one measurement unit? For example, common home lot sizes may be stated in acres or in square feet. If so, you may need select lists to specify the proper units for the numbers. Including select lists will be particularly important if you are dealing with international measurements or currencies.
  • Be sure to remind your internal users that not all fields using numeric characters are treated as numbers. Examples include phone numbers and zip codes.

Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository

Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
amounts, sliders, price ranges, quantities
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)

Owners and governance
UX or design 0wner
John Designowner
Business or marketing owner
Mary Businessowner
Development owner
Mike Devowner

Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)

Comments & Questions