Number field or slider?

Use a number field when people know the value or need one-step precision. Use a slider when they are exploring a range and rounding is acceptable. Hotel booking guest counts are number fields. Screen brightness is a slider.

Should I use type="number"?

Use it when the value is always a number and browsers should show a numeric keypad on phones. Use type="text" with inputMode="numeric" when you need formatting, leading zeros or values browsers reject as invalid.

Where do the step buttons go?

On the trailing edge in left-to-right layouts, or one on each side when the field is narrow. Each button needs an accessible name: Increase quantity, Decrease quantity.

What are sensible min and max values?

Set them in markup and enforce them in script. Disable the decrease button at the minimum and the increase button at the maximum so people discover the limit without an error message.

Can people type outside the range?

Let them type, then validate on blur. Clamping silently while they type is confusing. Show an error if the submitted value is out of range.

How big should step buttons be?

At least 24 by 24 CSS pixels of hit area, and 44 by 44 on touch-first flows if you can (WCAG 2.5.8). The icons can be smaller inside that area.

Number field

A number field is a text input for counts and measures, usually with step buttons on either side. People type the exact value or nudge it one step at a time.

Forms and inputBuild difficulty: Medium<input type="number">

Also called Stepper, Spin button, Numeric input.

Guests

Between 0 and 10. The count below is what submits with the form.

2 guests

Type a number, or use the step buttons. Arrow keys on the field nudge the value up and down.

For designers

A number field is for when someone will say two guests, not about two. Shopping carts, booking flows and admin panels use steppers because the value is discrete and the buttons make the limit obvious.

The cost is clutter. A slider for a value between 0 and 100 feels lighter than plus and minus buttons beside a box. Count the steps people actually take. If most picks are 1, 2 or 3, a number field fits. If the range is wide and approximate, reach for a slider.

Show the unit beside the field when it matters: kg, %, px. The step buttons change the number; the unit tells someone what that number means. Without it, 50 on a opacity field and 50 on a width field look the same in the markup.

Use a number field when

The exact number matters and people will type it
The value changes in fixed steps, like guests or quantity in a cart
The range is too wide for a slider to feel precise

Reach for something else when

Close enough is fine and seeing the value on a track helps. Use a slider instead.
The value is free text with no numeric pattern. Use a text field instead.
There are only two or three fixed choices on one line. Use a segmented control instead.
Someone is picking one option from a labelled list. Use a select instead.

Variants

Quantity

Opacity

Steps by 5. Slider suits exploration; this suits a known value.

A compact stepper for quantity in a cart row, and a field that steps by five for a percentage.

Compact stepper. A narrow field between two icon buttons. Fits in a table row or card footer for quantity.

With step size. The buttons jump by 5 or 10 when the value spans a wide range. Show the step in helper text so the jump is predictable.

Read only display. Show the number without buttons when the value comes from elsewhere and cannot be edited inline.

How to build a number field

Wrap a native number input with a label and optional step buttons. Connect the buttons to increment and decrement in script.

<label for="guests">Guests</label>
<div>
  <button type="button" aria-label="Decrease guests">−</button>
  <input
    id="guests"
    type="number"
    name="guests"
    min="0"
    max="10"
    step="1"
    value="2"
    inputmode="numeric"
  />
  <button type="button" aria-label="Increase guests">+</button>
</div>

Tab reaches the input and each button in order. Arrow Up and Arrow Down on the input should match the step buttons. The mistake to avoid is two separate tab stops that both change the same value without a shared label. Group them visually and describe the whole control in the label.

On mobile, inputmode="numeric" brings up a number pad for the text portion while the step buttons stay tappable beside it. Test with the pad open: the field should not be hidden behind it.

Edge cases

Leading zeros. Order numbers and codes may start with 0. Use type="text" with inputmode="numeric" and validate the pattern.

Decimals. Set step="0.1" or step="any" when fractions matter. Show the unit beside the field so 2.5 kg reads clearly.

Empty field. Decide whether empty means zero or invalid before submit. Helper text beats a surprise error on save.

Long press on step buttons. Some products repeat increment while the button is held. Add a short delay before repeat starts so one tap does not overshoot.

Common questions

Number field or slider?: Use a number field when people know the value or need one-step precision. Use a slider when they are exploring a range and rounding is acceptable. Hotel booking guest counts are number fields. Screen brightness is a slider.
Should I use type="number"?: Use it when the value is always a number and browsers should show a numeric keypad on phones. Use type="text" with inputMode="numeric" when you need formatting, leading zeros or values browsers reject as invalid.
Where do the step buttons go?: On the trailing edge in left-to-right layouts, or one on each side when the field is narrow. Each button needs an accessible name: Increase quantity, Decrease quantity.
What are sensible min and max values?: Set them in markup and enforce them in script. Disable the decrease button at the minimum and the increase button at the maximum so people discover the limit without an error message.
Can people type outside the range?: Let them type, then validate on blur. Clamping silently while they type is confusing. Show an error if the submitted value is out of range.
How big should step buttons be?: At least 24 by 24 CSS pixels of hit area, and 44 by 44 on touch-first flows if you can (WCAG 2.5.8). The icons can be smaller inside that area.

Last reviewed 27 AUG 2026