<input type="number">
The <input type="number"> HTML element represents numeric input data.
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 |
- Prevents users from typing non-numeric content.
- Allows users to type non-numeric content, with the `value` reflecting an empty string.
- Allows users to type non-numeric content, with the `value` reflecting an empty string.
- Prevents users from typing non-numeric content.
- Allows users to type non-numeric content, with the `value` reflecting an empty string.
- This browser only partially implements this feature
- Does not have a specific UI. There are still differences with the latest spec; see bug 835773.
- This browser only partially implements this feature
- Does not have a specific UI. There are still differences with the latest spec; see bug 835773.
Syntax
<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
Step attribute. Compare Usage
width control.alignnumber, number, specific. step. with step
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.
Related links
Powered by web-features