Blueweb
(update figma link once the component gets published)
How to use
Use a Number Input when users need to adjust a quantity or numeric value in small steps, such as selecting the number of items, passengers, or units.
The component provides clear controls to increment or decrement the value and helps avoid input errors by guiding users through predefined steps.
Types
The number input comes in two different styles to fit different use cases.
Behavior
The minus (-) button decreases the value while the plus (+) button increases the value. Plus, minimum and maximum values can be defined to prevent invalid input.
Do’s and Don’ts
Do
Clearly define minimum and maximum values.
Don't
Don't allow values that break business rules or logic.
Do
Use the version with field when precise input is required.
Don't
Don't force users to click many times when a direct input would be faster.
Accessibility
- Ensure the buttons are keyboard accessible and usable with assistive technologies.
- The current value should be announced when it changes.
- Disable the minus or plus button when the minimum or maximum value is reached.
Content
- Display only numeric values
- Avoid additional symbols or text inside the value area.
Availability
Each global component provides a shared design direction across platforms. Implementation is owned by each platform team, so development status may vary per platform.
iOS
Android
Kiosk
Design status
Ready