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
Input
InputNumberNumeric Stepper
yuan
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 quantity
    Mechanical keyboard−2＋
  • Stock level
    Stock−50＋
  • Price or budget
    −1＋
    Minimum 1, maximum 99; anything outside is blocked
  • A number with clear limits
    Pricing19.90yuan
    Always keep two decimal places

When NOT to use it

  • Collect a phone number or account number that is not used in calculations
    Mobile−138****6688＋
    You can’t increment or decrement a phone number
  • Hide the unit when it changes the meaning
    Budget≈ 450
  • Rely on the browser control as the only validation
    2026-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
Limited time
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
<input type="number">MDN ↗