step

step Attribute

The step attribute defines the interval or "stepping" for numeric input types such as number, range,<date>, <time>, datetime-local, month, and week. It controls the allowed values when adjusting input with arrows or sliders.

Syntax

<input step="number | any">

Example

<form>
  <label for="quantity">Quantity:</label><br>
  <input type="number" id="quantity" name="quantity" min="0" max="20" step="2"><br><br>
  <input type="submit" value="Submit">
</form>

Key Points

• Valid for: number, range, <date>, month, week, <time>, datetime-local.
• Default Values:
• number and range: Step is 1 if not set.
• <time>: Defaults to 60 seconds.
• Date types (e.g., <date>, week, month): Step is based on days, weeks, months.
• Special Value: any allows free input without restrictions.

Validation

• If user input doesn't follow the step value, it triggers validation errors and is considered :invalid pseudo-class.

Accessibility

Provide clear instructions via labels or aria-describedby for proper user understanding of input requirements and steps.

Conclusion

The step attribute defines the allowed intervals for numeric or date inputs, ensuring users provide values that adhere to a specific increment. It applies to input types like number, range, and date. By controlling input precision, it helps maintain consistent data entry and improves form validation.