The HTML minlength attribute
The HTML minlength attribute sets the minimum number of characters a text field accepts. Add it to an <input> or <textarea>, as in minlength="8" on a password field. A shorter entry fails validation and blocks submission, but an empty field still passes unless you also add required.
Overview
The HTML minlength attribute sets the minimum number of characters a user must enter in a text field. It works on <textarea> and on <input> fields of type text, search, url, tel, email and password. The value is a whole number, 0 or higher.
The limit feeds the browser's built-in constraint validation. When someone types fewer characters than required, the field matches the :invalid pseudo-class, validity.tooShort becomes true, and pressing submit shows an error instead of sending the form. Chrome's message asks the user to lengthen the text and says how many characters they have used.
Two rules explain most surprises. An empty field always passes, because minlength only applies once there is a value, so pair it with required when the field can't be blank. The check also covers only what the user typed, which means a value set from JavaScript is never flagged as too short.
Length is counted in UTF-16 code units, the same way JavaScript's length property counts. Spaces count like any other character, a line break in a textarea counts as one, and a character that needs two code units, such as many emoji, counts as two. Number inputs ignore minlength entirely.
Syntax
<label for="pw">Password</label>
<input type="password" id="pw" name="password" minlength="8" autocomplete="new-password" required>Values
| Value |
|---|
| A non-negative integer. |
Example
<form onsubmit="event.preventDefault(); document.getElementById('msg').textContent = 'Username accepted';">
<p>
<label for="user">Username, at least 4 characters</label>
<input type="text" id="user" name="user" minlength="4" required>
<button>Check</button>
</p>
<p id="msg"></p>
</form>Best practices
- Add
requirednext tominlengthwhen a field must not be empty. An empty value passes the length check on its own. - State the rule in visible text, such as a hint reading At least 8 characters, and connect it to the field with aria-describedby.
- Keep
minlengthlower than or equal to maxlength. A higher minimum makes every non-empty value invalid. - Limit numbers with min and max, because
type="number"ignoresminlength. - Run the same length check on the server, where the browser's rule can't be skipped.
Accessibility
Tell people about the minimum before they start typing. MDN notes that some browsers display an error message only once submission fails. A hint placed next to the field and referenced with aria-describedby is linked to the field as its description, so assistive technology users can reach the rule right away.
Frequently asked questions
What does the minlength attribute do in HTML?
Why is minlength not working on my input?
required to reject an empty field, and use min and max to limit a number instead.Does minlength work on a textarea?
Does minlength count spaces?
minlength=8, so trim and check the value on the server if blank input matters.
