Number Input
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
InputNumberNumeric Stepper
You can say this to an AI Agent
Make cart quantity an integer number input that supports direct entry and step-by-one controls from 1 to 20. Show range errors in the UI, but validate against live server stock on submit and verify the retry message when stock changes.
Number Input≠Steps
Some design systems call both controls Stepper. Number Input increases or decreases a number; Steps shows the stages of a process.
When to use it
- Product quantityMechanical keyboard−2＋
- Stock levelStock−50＋
- Price or budget−1＋Minimum 1, maximum 99; anything outside is blocked
- A number with clear limitsPricing19.90yuanAlways keep two decimal places
When NOT to use it
- Collect a phone number or account number that is not used in calculationsMobile−138****6688＋You can’t increment or decrement a phone number
- Hide the unit when it changes the meaningBudget≈ 450
- Rely on the browser control as the only validation2026-07-21 📅Dates have their own picker
- Use tiny step buttons as the only way to enter a large value−12,800＋For a wide numeric range, support direct entry
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
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check