Menu
Components
This page is In Progress and subject to frequent changes
Please contact Jo Welling to verify any information is correct before using it.
Numeric input
In Progress
Hey, this is an old version. View the latest
Numeric inputs allow users to provide a number value using their keyboard. A unit can be displayed within the field where needed
UX Owner: Jo Welling
UI Owner: Steven Roberts
Note: This component doesn't yet exist in Storybook, preliminary image(s) shown.
Example
When to use
Numeric inputs can be used where:
- You're asking a user for only a numeric value; and
- There are a wide (or infinite) range of possible values.
When not to use
Numeric inputs should be avoided where:
- You need a user to enter non-numeric characters (use text input instead)
- there’s a small range of possible values or only a small range of value are likely to be selected (consider using a radio group instead)
Variants
Unit prefix
Prefixed units and symbols can be added to numeric inputs where needed. The prefixed unit is commonly (but not exclusively) used where we're asking for a monetary amount.
Unit suffix
Similarly, suffixed units and symbols can also be added to numeric inputs where needed. Suffixed units are commonly used where we're asking for measures like weights, heights and meter readings.
Unit prefix and suffix
The prefixed and suffixed units can also be used together. This can be particularly useful when asking about a frequent payment.
Anatomy
Where to find this component
Documentation version history
Last updated Monday, 21st June 2021 10:44 by Adrian T.