Number input helper text and error messages association
Carbon uses `aria-describedby` to associate the helper text and error messages with the input field.
number-input
25 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Number input error icon aria-hidden attribute
The red error SVG icons in number inputs have `aria-hidden="true"` set, since the helper text provides the same information to assistive technology.
Number input keyboard interaction: tab stop and arrow keys
The Carbon number input takes a single tab stop and is reachable by Tab. The + and - buttons are not in the tab order. When the input has focus, arrow keys allow keyboard users to incrementally adjust values. Users can also directly type numeric values in the input field, and only numerals are allowed to be entered.
Number input error handling for assistive technology
Carbon provides error and warning messages to assistive technology, improving upon the stock HTML number input which simply prevents typing alphabetic characters without explanation. Carbon also adds an error or warning icon and displays error messages in red as a visual cue. This means color is not the only indicator of errors.
Number input minimum and maximum value warnings
Designers should warn users in advance about minimum and maximum value limits on number input, rather than allowing users to discover limits through error messages. This is particularly important if the step value is altered, which determines the increment change when activating the +/- buttons or arrow keys.
Number input step value matching requirement
If a user directly enters a value that does not match the step increment, it will be disallowed. Advanced warnings through helper text are crucial to avoid confusing users with unexplained rejections.
Number input accessibility design annotations needed
Design annotations are needed for specific instances of number input where designers set minimum and maximum values or alter the step value. The standard number input component already incorporates most accessibility features.
Number input component purpose
The number input component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value with a two-segment control.
When to use number input
Use number input when the user needs to input a numeric value, when adjusting small values requires only a few clicks, or when users may not know exact values and only want to change values relative to the current state.
When not to use number input
Do not use number input if large value changes are expected, such as when the value needs to change from 1 to 30, as this requires many clicks. In such cases, use a slider instead. Also avoid number input for continuous variables such as prices, distances, lengths, or human heights where the exact value is important to specify within a wide range; use text input instead.
Number input anatomy
Number input consists of: (1) Label—required text informing users about the content to enter, (2) Numeric value—changes when user enters a value or uses controls, (3) Helper text—optional assistive text providing additional context, (4) Field—the container where users enter data, (5) Subtract icon—triggers decremental values, (6) Add icon—triggers incremental values, (7) Status icon—indicates error or warning state, (8) Error or Warning text—replaces helper text when error or warning state appears.
Number input styles: default vs fluid
Default style has the label positioned outside and above the input field; use when white space is needed between input components or in productive moments where space is at a premium. Fluid style has the label placed inside the input field stacked inline with user input text; use in expressive moments, fluid forms, contained spaces, or attached to complex components like toolbars.
Default number input sizes
Number input has three sizes: Small (sm) at 32px/2rem height—use when space is constricted or in long and complex forms. Medium (md) at 40px/2.5rem height—this is the default size and most commonly used. Large (lg) at 48px/3rem height—use when there is ample space, typically in simple forms or when placed by itself on a page.
Fluid number input height
Fluid input has one fixed height of 64px, which is visually larger than default heights. This height applies except when a warning or error message is added to the bottom.
Number input label requirements
Always include a label so users know how to complete the field. Keep the label short and concise. Use sentence-style capitalization for the label.
Number input helper text
Helper text indicates the input value if it has a maximum or minimum. Helper text is optional but if present will be replaced by warning and error messages when needed.
Number input overflow content rules
Label, numeric value, and helper text should be short and not exceed two lines.
Number input states
Number input has seven states: Enabled—the default state when not interacting; Hover—when mouse cursor is over the field or controls; Focus—when user tabs to or clicks the input; Error—when required field is empty or system error occurs, requires user response before submission; Warning—calls user attention to an exception condition that might not be an error but can cause problems; Disabled—when user cannot interact and all functions removed, not focusable or screen reader accessible; Skeleton—on initial page load to indicate loading; Read-only—user can review but not modify, still focusable and accessible.
Number input mouse interactions
Users can click on the input field and change the value by typing. Users can also increase or decrease values by pressing the add or subtract icon controls.
Number input keyboard interactions
Users can navigate to the number input field by pressing Tab. Users can then increase the value by pressing Up arrow or decrease the value by pressing Down arrow.
Number input validation error state
An error state is triggered if data is invalid or a required field is left empty. Error states have three visual indicators: a red border, an error icon indicator, and an error message.
Number input default values
Numeric input should always have a default value. The default is usually '1', but sometimes defaults to '0'. For example, when booking a hotel, the default number of adults might be '1' and the default number of children '0'. Do not leave value input blank.
Number input with AI label
Number input has a modification that takes on AI visual styling when an AI label is present. The AI variant functions the same as the normal version except with the addition of the AI label, which serves as both a visual indicator and trigger for the explainability popover. See Carbon for AI guidelines for more information on designing for AI.
Number input revert to AI
A number input can toggle between the AI variant and non-AI variant depending on user interaction. If a user manually overrides AI-suggested content, the input changes from the AI variant to the non-AI variant. Once edited, users should still be able to switch back to the initially AI-generated content via a revert to AI button.
Number input related components
Use slider when numeric values are large or there is a wide range of numeric options. Use text input when the exact value is important to specify within a wide range.