Skip to main content
Frontend Glossary

UI components · Form input

Input Number

Also called: Number input, Stepper, Quantity selector, Numeric field

An input that only accepts numbers, with plus and minus buttons. It can limit the minimum, maximum, and step size.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

In the shopping cart, use an input number for each item's quantity: "−" on the left, "+" on the right, and the number in the middle can be typed directly. Min is 1, max is the stock count, step is 1. When it hits a limit, gray out and disable that button. If the value is out of range or not a number, snap it back to the nearest valid value on blur.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Input Number is what you need.

Use Input Number when

  • Whole numbers that need small adjustments, like quantity, number of people, or number of days
  • Values with a clear min, max, or step, like a discount percentage from 0 to 100
  • Values that need a fixed number of decimal places, like amounts or weights

Pick something else when

  • IDs made of digits that you never calculate with, like phone numbers, SSNs, or verification codes. Use a regular input.

    Use insteadInput

  • Settings that only need rough adjustment where the exact value doesn't matter, like volume or brightness

    Use insteadSlider

  • When there are only a few fixed levels to choose from. Use radio buttons or a select.

    Use insteadRadioSelect

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Turning phone numbers or card numbers into number fields with plus/minus buttons, which also swallows leading zeros

  2. 02

    No minimum, so quantity can go down to 0 or even negative

  3. 03

    Plus/minus buttons too small to tap on a phone

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A number field in the middle with plus/minus buttons on both sides (or stacked up/down on the right). Can have unit prefixes or suffixes.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

An input number is built for values like quantity, age, price, and percentage. It blocks non-numeric characters and has "−" and "+" buttons, or small up/down arrows on the right. Each click changes the value by the set step, and when it hits the minimum or maximum, the matching button gets disabled. You can also set the number of decimal places and show units before or after, like "$", "%", or "pcs".

The difference from a regular Input is the numeric limits and the plus/minus controls. The difference from a Slider is that you can type an exact number, while a slider is better for rough adjustments by dragging. Note that phone numbers, Social Security numbers, and verification codes are all digits, but you never do math on them and leading zeros can't be dropped, so use a regular input for those.

Developer info
Term ID
component-input-number
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • input[type="number"]
  • input[role="spinbutton"]
  • .ant-input-number
  • .el-input-number
  • .arco-input-number
  • .t-input-number
  • .n-input-number
Priority
2 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026