InputNumber
You might say
Only let people enter numbers for the quantity, with plus and minus controls if possible.
Enter a number with a defined range and stepA number input works for quantity, stock, price, and other numeric values. It can limit the format, minimum, maximum, and step size. Business rules such as available stock or a valid price still need to be checked again when the form is submitted.
Know first
Number InputNumeric Stepper
InputNumber≠Steps
Some design systems call both controls Stepper. InputNumber increases or decreases a number; Steps shows the stages of a process.
When to use it
- Product quantity
- Stock level
- Price or budget
- A number with clear limits
When NOT to use it
- Collect a phone number or account number that is not used in calculations
- Hide the unit when it changes the meaning
- Rely on the browser control as the only validation
- Use tiny step buttons as the only way to enter a large value
Anatomy
The input and plus/minus buttons form one control, also called a numeric stepper.
Click to decrease the value by one step
Users can also type a value directly
Disable it after it reaches the upper limit.
Variants
Default
For simple numeric input, such as quantity or inventory
With Unit
piece
Prices and quantities need a visible unit.
Small
In cards, rows, and other tight spaces
Disabled
This value is currently not allowed to be changed
Typical use cases
Shopping quantity
Wireless mechanical keyboard · Brown switches
87 keys / Bluetooth dual mode
¥ 329.00
Total 2 items, total ¥ 658.00
Inventory editor
Inventory management · Wireless mechanical keyboard
Stock on handpieces
Low-stock alertitems
We’ll notify you on the dashboard when stock falls below this level
Budget setting
Hand-brewed coffee trial class
Limit 5 seats per person · Class starts on July 26th
Number of copies to purchase
Team size
Product pricing
Priceyuan
Member priceyuan
Automatically retain two decimal places, the minimum is not less than 0.01 yuan
Further reading