The Number Input component is a specialized input field designed for numerical data entry. It provides controls for incrementing and decrementing values, ensuring users can only enter valid numerical values.
Use the Number Input component when:
You need users to enter a specific numerical value
The input requires validation within a numerical range
Users benefit from increment/decrement controls for precise adjustments
You need to enforce number formatting (decimals, units, etc.)
Input field: The main area where users can type numerical values
Increment button: Increases the current value by a predefined step
Decrement button: Decreases the current value by a predefined step
Label: Identifies the purpose of the input field
Helper text (optional): Provides additional context about the expected input
Error message (optional): Displays validation errors
Unit display (optional): Shows the measurement unit associated with the value
Min/Max Values: Optional range constraints for the input
Step Value: Amount to increment/decrement when using controls (default: 1)
Default Value: Initial value when the input is rendered
Decimal Precision: Number of decimal places to allow/display
Size Variants: Standard or compact sizing
Disabled State: Non-interactive state
Error State: Indicates validation issues
Unit Display: Optional suffix showing measurement units
Use clear, concise labels that describe what number the user needs to enter
Include units of measurement in the label or as a suffix when applicable or in the label.
For range-limited inputs, consider showing the allowed range in the helper text
Provide engineers with labels for the decrease/increase controls
All inputs must have a visible and programmatic label
Formatting requirements should be displayed in a persistent manner (not as placeholder text that is replaced as the user enters data)
Error and warning messages should use appropriate icons with text as to not rely on color as the only means of indicating error.
Up/Down arrows to increment/decrement values
Home/End keys to set min/max values
Tab navigation between the input field and controls
Ensuring screen readers announce value changes when using increment/decrement controls