HTML min Attribute

Introduction

The min attribute sets the minimum allowed value on certain <input> types and defines the lower bound of the scale on <meter> and <progress> elements. It is essential for form validation—preventing zero or negative quantities, blocking dates before a cutoff, and anchoring range sliders. Pair it with max to define a valid range. Do not confuse min with minlength (minimum character count on text inputs) or low on <meter> (warning threshold, not the scale limit).

What You’ll Learn

Purpose of min Attribute

The primary purpose of min is to enforce a lower bound on values the user can submit. A quantity field with min="1" rejects zero or negative orders. A date field with min="2026-01-01" blocks dates before that day. A range slider with min="0" and max="100" maps its track to that numeric span.

Browsers use min during constraint validation. Values strictly below min make the control invalid; the form may not submit until the value is corrected (unless JavaScript bypasses checks). This is client-side guidance only—always re-validate on the server.

📝 Syntax

Add min with a value matching the input type’s format:

<label for="quantity">Quantity:</label>

<input type="number" id="quantity" name="quantity" min="1" max="100" value="1">



<label for="startDate">Start date:</label>

<input type="date" id="startDate" min="2026-01-01">



<label for="volume">Volume:</label>

<input type="range" id="volume" min="0" max="100" value="50">



<meter min="0" max="100" value="72"></meter>

Syntax Rules

• Value format depends on input type: number/range use numbers; date uses YYYY-MM-DD; time uses HH:MM.
• Valid on number, range, date, time, datetime-local, month, week, meter, and progress.
• Not valid on text-like inputs—use minlength for character minimums.
• Pair with max; ensure min ≤ max.
• JavaScript IDL property: inputElement.min = "5" (string).
• Works with step on number and range inputs for increment alignment.

💎 Values

The min attribute accepts a string whose meaning depends on the control type:

• min="1" on type="number" — Lowest allowed integer (e.g. quantity at least 1).
• min="0" on type="range" — Left end of the slider track.
• min="2026-01-01" on type="date" — Earliest selectable date.
• min="09:00" on type="time" — Earliest selectable time.
• min="0" on <meter> or <progress> — Lower bound of the scale (not the current value).

document.getElementById("dynamicMinField").min = "5";

document.getElementById("startDate").setAttribute("min", "2026-06-01");

Applicable Elements

min vs max vs minlength

Examples Gallery

Number input floor, earliest date, and dynamic min on a range slider with JavaScript.

<label for="quantity">Quantity:</label>

<input

  type="number"

  id="quantity"

  name="quantity"

  min="1"

  max="100"

  value="1">

<label for="startDate">Start date:</label>

<input type="date" id="startDate" min="2026-01-01">

<input type="range" id="volume" min="0" max="100" value="50">



<script>

  document.getElementById("volume").min = "25";

</script>

♿ Accessibility

• Pair labels with inputs — Use <label for="id"> so users know what the min limit applies to.
• Describe limits in help text — State the allowed range visibly (e.g. “1–100”) for screen reader users and sighted users alike.
• Do not rely on color alone — Invalid states should include text or aria-invalid when you enhance validation with JavaScript.
• Announce dynamic min changes — If JavaScript raises min, consider an aria-live region explaining the new floor.
• Server validation for everyone — Client min alone can be bypassed; enforce limits on the server.

💡 Best Practices