UI Component Lab 日本語

← All components

Input

Number input

A box for a number that can also be raised or lowered one step at a time.

Quantity

1 to 10

Also known as

Spinbutton — WAI-ARIA APG
Number input — Carbon Design System
InputNumber — Ant Design
Stepper (the − / + buttons) — Apple Human Interface Guidelines

How to recognize it

A narrow text box with small up and down arrows (or − and + buttons) at the side.

Behavior

The user can type a number or change it with the arrows.
This demo uses the native <input type="number"> with min, max and step. Values outside the range get a red border.
APG also defines Home / End for the minimum and maximum, but the native element uses them to move the text cursor.

Keyboard

Key	Action
`↑`	Increases the value by one step.
`↓`	Decreases the value by one step.
`0–9`	Types the value directly.

Usage notes

Use it for counts that go up and down in small steps, such as a quantity. Do not use it for numbers that are really codes, such as postal codes or card numbers.
Some design systems avoid type="number": scrolling can change the value by accident, and some browsers accept letters like “e”. A text input with inputmode="numeric" is an alternative.

Slider: A number input is for exact numbers; a slider picks a rough position by dragging.
Stepper: Some systems (such as Apple) call the − / + buttons of a number input a “stepper”. Here, stepper means the step indicator of a multi-page procedure.

Sources

WAI-ARIA APG: Spinbutton Pattern (Last checked: 2026-10-20)
MDN: <input type="number"> (Last checked: 2026-10-20)
Open UI: Number (Input) (Last checked: 2026-10-20)
GOV.UK Design System: Text input (Numbers) (Last checked: 2026-10-20)