HTML selected Attribute

Introduction

The selected attribute is a boolean attribute on <option> elements. It marks an option as pre-selected when the page loads inside a <select> dropdown. Use it to provide a sensible default—such as a user’s country, a common plan, or a placeholder choice that still has a real value.

What You’ll Learn

Purpose of selected

The primary purpose of the selected attribute is to specify the initially selected option within a <select> control. When the form renders, that option appears in the closed dropdown and its value is submitted if the user does not change the selection.

This improves usability when one choice is clearly the most common, when restoring a previously saved preference, or when guiding users toward a recommended default without removing other choices.

📝 Syntax

Add the boolean selected attribute to one <option> inside a <select>:

<select name="plan">
  <option value="free">Free</option>
  <option value="pro" selected>Pro</option>
  <option value="team">Team</option>
</select>

Syntax Rules

• Valid on <option> elements inside <select> (including within <optgroup>).
• Boolean attribute—write selected, selected="", or selected="selected" (XHTML style).
• In a single-select <select>, only one option should have selected.
• If no option has selected, the first option is selected by default in most browsers.
• With <select multiple>, multiple options may have selected.
• Disabled options (disabled on <option>) cannot be selected.

💎 Values

The selected attribute is a boolean attribute—it has no meaningful string value. Its presence alone marks the option as selected:

• <option selected> — Standard HTML5 boolean form.
• <option selected=""> — Empty string value (equivalent).
• <option selected="selected"> — XHTML-style; still valid.
• Absence of selected — Option is not pre-selected (unless chosen by browser default rules).

<!-- Multiple selections with select multiple -->
<select name="toppings" multiple size="4">
  <option value="cheese" selected>Cheese</option>
  <option value="pepperoni" selected>Pepperoni</option>
  <option value="mushroom">Mushroom</option>
</select>

Applicable Elements

selected vs checked vs select.value

Examples Gallery

Basic boolean selected, a form with a default car choice, and dynamic selection with JavaScript.

<select>
  <option value="option1" selected>Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<form>
  <label for="car">Select your car:</label>
  <select id="car" name="car">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes" selected>Mercedes</option>
    <option value="audi">Audi</option>
  </select>
  <input type="submit" value="Submit">
</form>

<select id="dynamicSelect">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
</select>

<script>
  var conditionMet = true;
  if (conditionMet) {
    document.getElementById("dynamicSelect").value = "saab";
  }
</script>

♿ Accessibility

• Pair with labels — Use <label for="selectId"> so users know what the dropdown controls.
• Choose ethical defaults — Pre-selecting expensive or opt-in options can confuse users; defaults should be neutral or clearly beneficial.
• Avoid placeholder-only defaults — If no valid choice exists yet, use a disabled placeholder option instead of a misleading pre-selection.
• Announce changes — When JavaScript changes selection, ensure related UI updates are visible; don’t rely on color alone.
• Keyboard accessible — Native <select> supports arrow keys and type-ahead; custom widgets need full ARIA support.

💡 Best Practices