HTML step Attribute
Description
The HTML step attribute is used to control the granularity of value changes in input elements that allow for numeric or date/time values. It specifies the interval between legal numbers in an input field, essentially defining the amount and precision of valid increments or decrements when adjusting the value of the element. This attribute is particularly useful for <input> elements with types such as number, range, date, datetime-local, month, time, and week.
When the step attribute is applied, it determines how much the value should increase or decrease when the user interacts with input controls, like arrow buttons in a number input or the up and down keys. For example, if you set step="2" on a number input, the value will increase or decrease by 2 units with each step. If applied to a date input, step="7" would allow only dates that are a multiple of 7 days apart.
The attribute's value can be any positive floating point number, and there are special values like any, which allows for any numerical value, step-wise. Omitting the step attribute or setting it to its default value, which is 1, means the input will accept only whole numbers (for number) or single-step increments based on the input type (like one day for date, one second for time, etc.).
It's important to note that the step attribute works in conjunction with the min and value attributes to determine the range of acceptable values. The starting point for stepping (incrementing or decrementing) is defined by the min attribute if present, or the default value of the input type if not. If the user enters a value that does not fit the stepping constraint, the input will be considered invalid in forms.
Syntax
<input step="number | any">
Values
- numberThe increment or decrement interval. A numeric value.
- anyThe number input value may increase or decrease with no specific step value.
Applies To
Example
Browser Support
The following information will show you the current browser support for the HTML step attribute. Hover over a browser icon to see the version that first introduced support for this HTML attribute.
This attribute is supported by all modern browsers.
Desktop
Tablets & Mobile
Last updated by CSSPortal on: 27th March 2024
