HTML minlength Attribute

HTML minlength Attribute

The HTML minlength attribute specifies the minimum number of characters a user must enter into supported <input> and <textarea> controls for the value to satisfy the minimum-length constraint.

Elements That Use the minlength Attribute

The minlength attribute is used with text-based <input> controls and the <textarea> element.

minlength Value

The value of the minlength attribute must be a non-negative integer. It specifies the minimum number of characters required for a user-entered value to satisfy the minimum-length constraint.

<input type="text" minlength="5">

In this example, a non-empty user-entered value containing fewer than five characters does not satisfy the minimum-length requirement.

Using minlength with <input>

The minlength attribute can be used with text-based input types when a user-entered value must contain at least a specified number of characters.

<label for="username">Username:</label>
<input type="text" id="username" name="username" minlength="5" required>

In this example, the username must contain at least five characters before the form can pass constraint validation.

Using minlength with <textarea>

The minlength attribute can also require a minimum amount of user-entered text in a <textarea>.

<label for="message">Message:</label>
<textarea id="message" name="message" minlength="20" required></textarea>

Here, the user must enter at least 20 characters before the control satisfies the minimum-length requirement.

minlength and maxlength

The minlength and maxlength attributes can be used together to define the permitted length of user input.

<input type="text" minlength="5" maxlength="20" required>

In this example, the user must enter at least 5 characters and no more than 20 characters. When both attributes are present, the minlength value must not be greater than the maxlength value.

minlength and required

The minlength attribute does not by itself require the user to enter a value. An empty control can still be valid when the field is optional. Add the required attribute when the user must provide a value.

<input type="text" minlength="5" required>

With both attributes present, the field cannot be empty and a user-entered value must meet the minimum-length requirement.

Constraint Validation

The minlength attribute participates in HTML constraint validation. If a user enters a non-empty value containing fewer characters than required, the control has a tooShort validity error and is considered invalid.

Unlike maxlength, which normally prevents additional characters from being typed after the limit is reached, minlength allows shorter text to be entered but can prevent the form from passing validation.

Common Mistakes

Do not assume that minlength makes a field required. Add the required attribute when an empty value should not be accepted.

Do not confuse minlength with min. The minlength attribute sets a minimum character length for supported text controls, while min establishes a minimum numeric, date, or time value.

Do not use minlength on <input type="number">. Use min when a numeric value needs a lower limit.

Do not set minlength greater than maxlength. When both are present, they must describe a valid range of permitted text lengths.

Do not rely only on client-side length validation when submitted data must meet minimum requirements. Validate important submitted values on the server as well.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The minlength attribute is widely supported on text-based <input> controls and <textarea> elements in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the minlength Attribute

The example requires a username containing at least five characters. Enter fewer than five characters and click the button to see the browser's built-in validation without leaving the editor.

Summary

The HTML minlength attribute sets the minimum permitted length of user-entered text in supported <input> and <textarea> controls. It participates in constraint validation and can be combined with maxlength and required to establish the permitted length and whether a value must be entered.