Resources
Intro & Anatomy
Numeric steppers allows users to adjust numerical values through increment/decrement buttons or direct input.
Use numeric steppers for controlled number entry where users need to select from a specific range, e.g. quantity selection, age input, or pagination controls.
The component consists of MDX icon buttons for increment/decrement actions paired with a custom number input field.
Options & Styles
Content
MDX icon buttons provide increment and decrement functionality with clear visual controls.
Custom number input allows direct numerical entry and displays the current value.
Sizes
MDX numeric steppers come in two sizes: Small and medium for different interface requirements.
States
Numeric steppers provide visual feedback through multiple states:
Default for standard input appearance
Hover for interactive feedback when users engage with the stepper
Error for validation failures requiring user attention
Disabled
Disabled numeric steppers show when value adjustment isn't currently available, though we recommend avoiding disabled states when possible.
Best Practice & Usage
Numeric steppers should be used for controlled numerical input with clear boundaries and appropriate default values. Always provide labels and set reasonable limits for optimal user experience.
Always provide clear labels to communicate the stepper's purpose and expected values.
Never display numeric steppers without associated labels for context.
Use numeric steppers for small numerical ranges where users can easily understand the scope.
Avoid using steppers for unlimited ranges or very large numerical values.
Provide appropriate default values to guide user interaction.
Never display numeric steppers without initial values.
Design steppers for whole number increments that users can easily understand.
Avoid using numeric steppers for decimal values or complex numerical inputs.
Theming
You can customise colours, border width and radius, font styles and weights, spacings and sizes to match your design requirements.