HTML required Attribute

HTML required Attribute

The HTML required attribute is a Boolean attribute that makes a supported form control mandatory. When a required control does not contain an acceptable value, the browser can prevent the form from being submitted and prompt the user to complete the field.

Elements That Use the required Attribute

The required attribute is used with supported <input> controls and with the <select> and <textarea> elements.

Boolean Attribute

The required attribute is a Boolean attribute. Its presence makes the supported form control required, so it does not need a value.

<input type="email" name="email" required>

For Boolean attributes, writing a value such as required="false" does not make the field optional. If the attribute is present, the required state is enabled. To make the field optional, omit the attribute.

Supported Input Types

The required attribute applies to the following <input> types:

The required attribute does not apply to input types such as hidden, range, color, submit, image, reset, or button.

How required Works

When required is present on a supported form control, the control must contain an acceptable value before the form can pass constraint validation.

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

If the user attempts to submit the form while the required field is empty, the browser can prevent submission and display a validation message.

Required Select Element

<label for="state">State:</label>
<select id="state" name="state" required>
  <option value="">Select a state</option>
  <option value="OR">Oregon</option>
  <option value="WA">Washington</option>
</select>

The empty first option allows the <select> control to begin without an acceptable selection, requiring the user to choose another option.

Required Textarea

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>

Checkboxes and Radio Buttons

When required is used on a checkbox, that checkbox must be checked before the control satisfies the requirement.

<input type="checkbox" id="terms" name="terms" required>
<label for="terms">I agree to the terms</label>

Radio buttons work as a group. If a radio button in a group has the required attribute, the requirement is satisfied when any radio button in that group is selected.

<input type="radio" id="email-contact" name="contact" value="email" required>
<label for="email-contact">Email</label>

<input type="radio" id="phone-contact" name="contact" value="phone">
<label for="phone-contact">Phone</label>

For clarity and maintainability, applying required consistently to the radio buttons in a required group can make the markup easier to understand.

Form Validation

The required attribute participates in the browser's built-in constraint validation. A required control that does not contain an acceptable value is considered invalid and can prevent form submission.

Required controls can also be matched with the CSS :required pseudo-class, while applicable controls without the attribute can be matched with :optional.

input:required {
  border: 2px solid #0088cc;
}

A control that is disabled or otherwise barred from constraint validation does not become subject to validation simply because required is present. The required attribute must not be specified on an <input> element when readonly is also specified.

Accessibility

Do not rely only on the browser's validation message or a visual indicator such as color to tell users that a field is required. Clearly identify required fields in the form's visible labels or instructions.

<label for="name">Name (required):</label>
<input type="text" id="name" name="name" required>

The native required attribute communicates the required state to browsers and assistive technologies while also participating in form validation.

Common Mistakes

Do not use required="false" to make a field optional. Because required is a Boolean attribute, its presence makes the control required regardless of the text assigned to it.

Do not use required on input types where the attribute does not apply, such as hidden, range, color, or button controls.

Do not assume that adding required replaces server-side validation. Client-side validation improves the user experience, but submitted data should still be validated by the server.

Do not combine required and readonly on an <input> element. A read-only input is barred from constraint validation.

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 required attribute is widely supported on applicable <input> controls and the <select> 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 required Attribute

The example contains required name, email, and message fields. Try submitting the form without completing the fields to see the browser's built-in validation.

Summary

The HTML required Boolean attribute makes supported <input>, <select>, and <textarea> controls mandatory. Required controls participate in browser constraint validation, helping prevent a form from being submitted until the user supplies an acceptable value or selection.