A “select” element with a “required” attribute, and without a “multiple” attribute, and without a “size” attribute whose value is greater than “1”, must have a child “option” element.

The HTML specification enforces this rule because a required <select> element needs options for the user to choose from. Without any <option> children, the element is semantically meaningless — it’s a dropdown with nothing to select, yet the form demands a selection before submission. This creates an impossible situation for the user and an ambiguous state for the browser.

This rule specifically applies when all three of these conditions are true:

• The required attribute is present.
• The multiple attribute is not present.
• The size attribute is either absent or set to 1 (the default for a single-selection <select>).

When multiple is set or size is greater than 1, the <select> behaves differently (as a list box rather than a dropdown), and the specification relaxes this constraint. But for the standard single-selection dropdown, at least one <option> is mandatory.

Why this matters

• Usability: A required dropdown with no options gives users no way to satisfy the form requirement, effectively blocking form submission entirely.
• Accessibility: Screen readers announce <select> elements along with their available options. An empty required dropdown creates a confusing experience for assistive technology users.
• Form validation: Browsers use the first <option> with an empty value as the placeholder. The built-in constraint validation for required selects relies on checking whether the selected option’s value is a non-empty string. Without any options, this validation behavior is undefined.

How the placeholder pattern works

The HTML specification defines a specific behavior for required single-selection dropdowns: the first <option> element, if it has an empty value attribute, acts as a placeholder. When the form is submitted with this placeholder still selected, browser validation will reject the submission because the value is empty. This is the standard pattern for prompting users to make a deliberate choice.

Examples

❌ Invalid: required <select> with no options

<label for="color">Pick a color:</label>
<select id="color" name="color" required>
</select>

This triggers the validation error because there are no <option> elements inside the required <select>.

❌ Invalid: required <select> with only a group but no options

<label for="color">Pick a color:</label>
<select id="color" name="color" required>
  <optgroup label="Colors">
  </optgroup>
</select>

An empty <optgroup> doesn’t satisfy the requirement. The <select> still needs at least one <option>.

✅ Valid: required <select> with a placeholder and options

<label for="color">Pick a color:</label>
<select id="color" name="color" required>
  <option value="">--Select a color--</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

The first <option> has an empty value, so it serves as a placeholder. The browser will require the user to choose one of the other options before submitting the form.

✅ Valid: required <select> with multiple (rule does not apply)

<label for="colors">Pick one or more colors:</label>
<select id="colors" name="colors" required multiple>
</select>

This does not trigger the error because the multiple attribute is present, which exempts the element from this particular rule. However, an empty multi-select is still poor UX and should generally be avoided.

✅ Valid: required <select> with size greater than 1 (rule does not apply)

<label for="colors">Pick a color:</label>
<select id="colors" name="colors" required size="4">
</select>

When size is greater than 1, the element renders as a list box and the rule no longer applies. Again, while technically valid, an empty list box isn’t useful in practice.

✅ Valid: required <select> with grouped options

<label for="vehicle">Choose a vehicle:</label>
<select id="vehicle" name="vehicle" required>
  <option value="">--Select a vehicle--</option>
  <optgroup label="Cars">
    <option value="sedan">Sedan</option>
    <option value="suv">SUV</option>
  </optgroup>
  <optgroup label="Trucks">
    <option value="pickup">Pickup</option>
    <option value="semi">Semi</option>
  </optgroup>
</select>

Options inside <optgroup> elements count as child options of the <select>, so this is fully valid.

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Start Free Trial See Pricing