1. **Label:** Indicates what value the user should input in the numeric field.
2. **Input field:** Area for the user to type in their numeric input.
@@ -30,7 +35,10 @@ section: components
* Determine an increment size relative to your specific value range. Scale your increment size to accommodate for the types of values users will input in context.
For example: If your range is from 0-10, have increments of 1, but if your range is from 0-100, have increments of 10.
* Include unit symbols to the right of the text input and increase button, depending on your use case. Always use a unit’s standard abbreviation or symbol. For a list of recommended symbols, see our Units and symbols page.
-
+
+
## Variations
Number inputs can function in one of two ways:
@@ -46,7 +54,9 @@ A number input with thresholds disables each button when a user’s numeric inpu
When adding thresholds to a number input, be sure to inform users with text to minimize their risk for input errors. If a number input for the number of storage drives has a maximum input value of 20, communicate this limit in helper text: Maximum capacity 20.
-
+
+
+
## Accessibility
Consider the following guidance to ensure that your number input is 508 compliant:
+
+
+
+
+