HTML minlength Attribute

Introduction

The minlength attribute requires a minimum number of characters in a text-like <input> or <textarea> before the field passes validation. Unlike min (which sets numeric or date/time floors), minlength counts letters, digits, spaces, and symbols. Users can still type short text, but the browser marks the field invalid on submit or when checkValidity() runs. Use it for passwords, usernames, comments, and any field where a minimum text length is required.

What You’ll Learn

Purpose of minlength Attribute

The primary purpose of minlength is to enforce a lower bound on text length at validation time. A password field with minlength="8" rejects submissions with fewer than eight characters. A username with minlength="3" ensures at least three characters before the form is accepted.

Unlike maxlength, which stops the user from typing past a limit, minlength does not block keystrokes—it validates when the form is submitted or when constraint validation runs. Pair it with required so empty fields fail too, and complement it with server-side length checks.

📝 Syntax

Add minlength with a non-negative integer to text-like inputs or textarea:

<label for="username">Username:</label>

<input type="text" id="username" minlength="3" maxlength="20">



<label for="password">Password:</label>

<input type="password" id="password" minlength="8">



<label for="comment">Comment:</label>

<textarea id="comment" minlength="10" maxlength="500"></textarea>

Syntax Rules

• Value is a non-negative integer (character count), e.g. minlength="8".
• Valid on input types: text, search, url, tel, email, password.
• Valid on <textarea> elements.
• Not valid on number, date, checkbox, radio, etc.—use min for those.
• Pair with maxlength for a character length range; ensure minlength ≤ maxlength.
• JavaScript IDL property: element.minLength = 8 (camelCase, number).

💎 Values

The minlength attribute accepts a non-negative integer:

• minlength="3" — Username must have at least three characters.
• minlength="8" — Common minimum for passwords (combine with stronger server rules).
• minlength="10" — Short comment or bio minimum.
• minlength="0" — No minimum enforced (same as omitting the attribute in practice).
• Attribute absent — No HTML-enforced minimum character count.

document.getElementById("dynamicField").minLength = 10;

document.getElementById("password").setAttribute("minlength", "12");

Applicable Elements

minlength vs maxlength vs min

Examples Gallery

Password minimum length, signup form with username and password rules, and dynamic minLength with JavaScript.

<label for="password">Password:</label>

<input type="password" id="password" minlength="8" required>

<form>

  <label for="username">Username:</label>

  <input type="text" id="username" minlength="3" required>



  <label for="password">Password:</label>

  <input type="password" id="password" minlength="8" required>



  <button type="submit">Sign up</button>

</form>

<input type="text" id="dynamicField" minlength="3">



<script>

  document.getElementById("dynamicField").minLength = 10;

</script>

♿ Accessibility

• Announce minimums in labels — e.g. “Password (at least 8 characters)” so users know the requirement before typing.
• Provide clear validation messages — Browser default messages help; custom messages should be plain language.
• Do not rely on minlength alone — Assistive technology users still need server-validated length rules.
• Avoid excessive minimums — Very long required lengths frustrate users and may block valid input.
• Pair with required — minlength on an empty field may still pass unless the field is required or the user interacted with it.

💡 Best Practices