# Attribute “minlength” is only allowed when the input type is “email”, “password”, “search”, “tel”, “text”, or “url”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/attribute-minlength-is-only-allowed-when-the-input-type-is-email-password-search-tel-text-or-url
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `minlength` attribute defines the minimum number of characters (as UTF-16 code units) that a user can enter into a text-based input field. It provides built-in client-side validation without requiring JavaScript. However, it only makes sense on input types where the user is typing free-form text. For input types like `number`, `date`, `color`, `range`, or `checkbox`, the concept of a minimum character length doesn't apply — these inputs have their own constrained value formats or use other attributes like `min` and `max` for validation.

When the W3C validator encounters `minlength` on an unsupported input type, it flags the attribute as invalid. Browsers will typically ignore the attribute silently, meaning your intended validation won't actually work. This can lead to a false sense of security where you believe the input is being validated when it isn't.

The `minlength` value must be a non-negative integer (0 or higher) and must be less than or equal to `maxlength` if both are specified. The `minlength` attribute also works on `<textarea>` elements.

## Examples

### ❌ Incorrect: `minlength` on a number input

The `number` input type doesn't support `minlength`. If you want to enforce a minimum value, use the `min` attribute instead.

```html
<label for="age">Enter your age</label>
<input type="number" minlength="1" id="age">
```

### ✅ Fixed: Using `min` for number inputs

```html
<label for="age">Enter your age</label>
<input type="number" min="1" id="age">
```

### ❌ Incorrect: `minlength` on a date input

```html
<label for="start-date">Start date</label>
<input type="date" minlength="10" id="start-date">
```

### ✅ Fixed: Remove `minlength` from date inputs

Date inputs have a browser-controlled format, so character length constraints don't apply. Use `min` and `max` to constrain the date range.

```html
<label for="start-date">Start date</label>
<input type="date" min="2024-01-01" id="start-date">
```

### ✅ Correct: `minlength` on supported input types

Here are valid uses of `minlength` across all supported input types:

```html
<label for="username">Username (at least 3 characters)</label>
<input type="text" minlength="3" id="username">

<label for="email">Email</label>
<input type="email" minlength="5" id="email">

<label for="pass">Password (at least 8 characters)</label>
<input type="password" minlength="8" id="pass">

<label for="phone">Phone number</label>
<input type="tel" minlength="7" id="phone">

<label for="query">Search</label>
<input type="search" minlength="2" id="query">

<label for="website">Website URL</label>
<input type="url" minlength="10" id="website">
```

### ✅ Correct: `minlength` with `maxlength` on a textarea

```html
<label for="bio">Bio (between 10 and 200 characters)</label>
<textarea minlength="10" maxlength="200" id="bio"></textarea>
```

## Quick Reference

| Input Type | Supports `minlength`? | Alternative |
|---|---|---|
| `text`, `email`, `password`, `search`, `tel`, `url` | ✅ Yes | — |
| `textarea` | ✅ Yes | — |
| `number`, `range` | ❌ No | Use `min` / `max` |
| `date`, `datetime-local`, `time`, `month`, `week` | ❌ No | Use `min` / `max` |
| `checkbox`, `radio` | ❌ No | Use `required` |
| `file` | ❌ No | Validate with JavaScript |
| `color`, `hidden` | ❌ No | Not applicable |