HTML step Attribute

Introduction

The step attribute is used on <input> elements to specify the legal increment (or decrement) between allowed values. It works with numeric and date/time input types such as number, range, date, datetime-local, time, month, and week.

When users click the spinner arrows on a number field or drag a range slider, the browser jumps by the step amount. Form validation also rejects values that do not fit the step rule.

What You’ll Learn

Purpose of step

The primary purpose of the step attribute is to set stepping constraints for numeric, date, and time input fields. It defines how much the value should increase or decrease when users interact with spinners, sliders, or keyboard arrows.

By using step, you create more user-friendly forms and ensure that submitted data falls within meaningful increments—such as quantities sold in pairs, prices in half-dollar steps, or appointment times every 15 minutes.

📝 Syntax

Add step to a supported <input> type:

<label for="quantity">Quantity:</label>
<input
  type="number"
  id="quantity"
  name="quantity"
  min="1"
  max="10"
  step="2">

Syntax Rules

• Applies to number, range, date, datetime-local, time, month, and week inputs.
• Default for number and range: 1 (or 1 if min is an integer).
• step="any" on number allows any decimal (no fixed increment).
• For date/time types, step is measured in seconds (e.g. 900 = 15 minutes).
• Pair with min and max for a complete valid range.
• IDL property: HTMLInputElement.step.

💎 Values

The step attribute accepts values based on the input type:

• For number input — A positive number or any. Example: step="2" jumps by 2 from min; step="0.01" for cents.
• For range input — Defines slider tick increments. Example: step="5" with min="0" max="100" gives 0, 5, 10, … 100.
• For date, datetime-local, and time — Interval in seconds. Example: step="86400" on date = one day; step="900" on time = 15 minutes.
• For month and week — Also use seconds-based steps per HTML specification defaults.

<!-- Number: increments of 2 from min 1 -->
<input type="number" min="1" max="10" step="2">

<!-- Range: slider moves in steps of 5 -->
<input type="range" min="0" max="100" step="5" value="50">

<!-- Time: 15-minute intervals -->
<input type="time" step="900">

How It Works

On a number field with min="1" and step="2", spinner clicks produce 1, 3, 5, 7, 9. Values like 2 or 4 fail constraint validation when the form is submitted.

Applicable Elements

step vs min/max vs pattern

Examples Gallery

Number input with fixed step, range slider, dynamic JavaScript step, and time picker intervals.

<label for="quantity">Quantity:</label>
<input
  type="number"
  id="quantity"
  name="quantity"
  min="1"
  max="10"
  step="2">

<label for="volume">Volume:</label>
<input
  type="range"
  id="volume"
  min="0"
  max="100"
  step="5"
  value="50">

<label for="dynamicStepField">Enter a number:</label>
<input type="number" id="dynamicStepField">

<script>
  document.getElementById("dynamicStepField").step = "0.5";
</script>

♿ Accessibility

• Label every input — Use <label for="..."> so users know what the step-controlled field represents.
• Explain increments in help text — If steps are non-obvious (e.g. sold in pairs), add visible hint text near the field.
• Do not rely on spinners alone — Keyboard users can type values; ensure error messages explain valid increments when validation fails.
• Range sliders — Expose the current value to assistive tech; consider an associated text output or aria-valuetext for custom formatting.
• Reasonable step sizes — Very large or tiny steps can frustrate motor-impaired users adjusting sliders.

💡 Best Practices