Widely availableSupported across all major browsers. Safe to use in production.

Overview

The <input type="number"> HTML element represents numeric input data.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
4
12
16
5
18
4
HTML attribute

The max attribute defines the maximum value that is acceptable and valid for the input containing the attribute. If the value of the element is greater than this, the element fails validation. This value must be greater than or equal to the value of the min attribute. If the max attribute is present but is not specified or is invalid, no max value is…

4
12
16
5
18
4

The min attribute defines the minimum value that is acceptable and valid for the input containing the attribute. If the value of the element is less than this, the element fails validation. This value must be less than or equal to the value of the max attribute.

4
12
16
5
18
4

The step attribute is a number that specifies the granularity that the value must adhere to or the keyword any. It is valid for the numeric input types, including the input/date, input/month, input/week, input/time, input/datetime-local, input/number and input/range types.

5
12
16
5
18
4

input elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries.

7
12
29
5.1
18
5
DOM API

The min property of the HTMLInputElement interface reflects the input element's min attribute, which generally defines the minimum valid value for a numeric or date-time input. If the attribute is not explicitly set, the min property is an empty string.

4
12
16
5
18
4

The step property of the HTMLInputElement interface indicates the step by which numeric or date-time input elements can change. It reflects the element's step attribute. Valid values include the string "any" or a string containing a positive floating point number. If the attribute is not explicitly set, the step property is an empty string.

5
12
16
5
18
4

The HTMLInputElement.stepDown() method decrements the value of a numeric type of input element by the value of the step attribute or up to n multiples of the step attribute if a number is passed as the parameter.

5
12
16
5
18
4

The HTMLInputElement.stepUp() method increments the value of a numeric type of input element by the value of the step attribute, or the default step value if the step attribute is not explicitly set. The method, when invoked, increments the value by (step \* n), where n defaults to 1 if not specified, and step defaults to the default value for step if not…

5
12
16
5
18
4

The valueAsNumber property of the HTMLInputElement interface represents the current value of the input element as a number or NaN if converting to a numeric value is not possible.

5
12
16
5
18
4
1+Supported (version) Not supported Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Prevents users from typing non-numeric content.
Notes 1 item(s)
Implementation note
  • Allows users to type non-numeric content, with the `value` reflecting an empty string.
Notes 1 item(s)
Implementation note
  • Allows users to type non-numeric content, with the `value` reflecting an empty string.
Notes 1 item(s)
Implementation note
  • Prevents users from typing non-numeric content.
Notes 1 item(s)
Implementation note
  • Allows users to type non-numeric content, with the `value` reflecting an empty string.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Does not have a specific UI. There are still differences with the latest spec; see bug 835773.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Does not have a specific UI. There are still differences with the latest spec; see bug 835773.

Syntax

HTML
<label>Quantity:
  <input type="number" min="1" max="99" step="1" value="1">
</label>

<label>Price:
  <input type="number" min="0" step="0.01" placeholder="0.00">
</label>

Live demo

Numberinput

Number type in spinner with. Numberinputfield provide.

PreviewFullscreen

numberamountselekta-

Number input ka-t style. numberamountselectionUI and usage.

PreviewFullscreen

Step attribute. Compare Usage

width control.alignnumber, number, specific. step. with step

PreviewFullscreen

Use cases

  • Using <input type="number">

    The <input type="number"> HTML element represents numeric input data.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Verify how this element is announced by screen readers.

Powered by web-features