HTML step Attribute

HTML step Attribute

The HTML step attribute specifies the allowed intervals between values for supported <input> controls. It works with the control's minimum value, current value, and input type to determine which values satisfy the stepping rules.

Elements That Use the step Attribute

The step attribute is used with the <input> element when its current input type supports stepping.

Supported Input Types

The step attribute applies to the following <input> types:

• date
• datetime-local
• month
• number
• range
• time
• week

The meaning of the step value depends on the input type. For example, a number control steps through numeric values, while a date control expresses its step in days and a time control expresses its step in seconds.

step Attribute Value

The step attribute accepts either a valid floating-point number greater than zero or the keyword any.

<input type="number" min="0" step="5">

With a step base of 0, this example allows values such as 0, 5, 10, 15, and 20 to satisfy the step requirement.

Number and Range Controls

For number and range controls, the step value specifies the numeric interval between allowed values.

<input type="number"
       min="0"
       max="10"
       step="0.5">

This number control allows values at half-unit intervals from its step base, such as 0, 0.5, 1, 1.5, and 2.

<input type="range"
       min="0"
       max="100"
       step="10">

The range control moves through values in intervals of 10.

Date and Time Controls

The unit represented by step depends on the date or time input type. For date, the value is expressed in days. For month, it is expressed in months, and for week, it is expressed in weeks. For time and datetime-local, the value is expressed in seconds.

<input type="date"
       min="2026-01-01"
       step="7">

This example uses seven-day intervals beginning from the minimum date.

<input type="time"
       step="900">

Because the time step is expressed in seconds, 900 represents 15-minute intervals.

The any Value

The keyword any removes the allowed value step restriction. Values must still satisfy other applicable requirements, such as min, max, and the format required by the input type.

<input type="number"
       min="0"
       max="10"
       step="any">

This control can accept values such as 1, 1.25, or 3.1415 without suffering from a step mismatch, provided the values satisfy the control's other constraints.

Step Base

The browser calculates allowed values from a step base. When possible, the valid min attribute value is used as the step base. If there is no usable min, a valid value attribute can provide the base. Otherwise, the input type's default step base is used, if one is defined, or the base is zero.

<input type="number"
       min="1"
       step="2">

Because the minimum value is 1, the allowed values follow intervals of 2 from that base: 1, 3, 5, 7, and so on.

Constraint Validation

When an input has an allowed value step, a value that does not fall on one of the permitted intervals can suffer from a step mismatch and fail constraint validation.

<input type="number"
       min="0"
       step="2"
       value="3">

With a step base of 0 and step="2", values such as 0, 2, 4, and 6 match the stepping rule. The value 3 does not and can produce a step mismatch.

Browsers may also use the stepping rules when providing controls for increasing or decreasing the value.

Common Mistakes

Do not use zero or a negative number for step. A numeric step value must be greater than zero.

Do not assume the step unit is always one numeric unit. Date and time input types use units such as days, weeks, months, or seconds.

Do not assume that step="2" always means the valid values are 0, 2, 4, and 6. The allowed values depend on the step base, which can be established by min or value.

Do not use step="any" to remove minimum or maximum restrictions. It removes the allowed value step restriction but does not disable other applicable validation constraints.

Do not use step with input types to which the attribute does not apply.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The step attribute is widely supported on applicable <input> types in current core browsers. The appearance and user interface of date, time, number, and range controls can vary between browsers and operating systems.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the step Attribute

The example uses step="5" with a number input and step="10" with a range input. Use the controls to see how each value changes according to its specified interval.

Summary

The HTML step attribute sets the allowed value interval for supported <input> controls. It accepts a positive floating-point number or the keyword any. The meaning of the interval depends on the input type, and the browser calculates permitted values using the step value together with a step base established by min, value, or the input type's default rules.