HTML selected Attribute

HTML selected Attribute

The HTML selected attribute is a boolean attribute that specifies that an <option> should be selected by default. It is commonly used in a <select> control to choose which option is initially selected when the page loads.

Elements That Use the selected Attribute

The selected attribute is used with the <option> element.

Boolean Attribute

The selected attribute is a boolean attribute. Its presence means that the option is selected by default, while its absence means that the option is not explicitly selected by default.

<option selected>Web Design</option>

Because it is a boolean attribute, the presence of selected is what matters. It does not need a value such as true or false.

How selected Works

When the browser creates an <option> element with the selected attribute, that option is selected by default. In a single-selection <select>, only one descendant <option> may have the selected attribute.

<label for="service">Choose a service:</label>
<select id="service" name="service">
  <option value="design">Web Design</option>
  <option value="hosting" selected>Web Hosting</option>
  <option value="domain">Domain Registration</option>
</select>

In this example, "Web Hosting" is the option selected by default.

Without the selected Attribute

For a single-selection <select> displayed as a drop-down, if no option is selected, the browser selects the first option in the list that is not disabled.

<select name="service">
  <option value="design">Web Design</option>
  <option value="hosting">Web Hosting</option>
  <option value="domain">Domain Registration</option>
</select>

In this example, "Web Design" becomes the initial selection because no option has the selected attribute.

Multiple Selected Options

When a <select> element uses the multiple attribute, more than one <option> can be selected by default.

<select name="services" multiple>
  <option value="design" selected>Web Design</option>
  <option value="hosting" selected>Web Hosting</option>
  <option value="domain">Domain Registration</option>
</select>

Here, both "Web Design" and "Web Hosting" are selected by default because the <select> allows multiple selections.

Default and Current Selection

The selected content attribute represents an option's default selected state. After the user interacts with the control, the option's current selected state can differ from the state represented by the HTML attribute.

For example, an option marked with selected can be the default selection when the page loads, but the user can choose another option while using the form.

<option value="hosting" selected>Web Hosting</option>

If the form is reset, the <select> control uses the options' default selected states again.

Common Mistakes

Do not write selected="false" when you want an option to be unselected. Because selected is a boolean attribute, its presence represents the selected state regardless of the text used as its value.

Do not add the selected attribute to more than one option in a single-selection <select>. Multiple default selections are appropriate when the <select> uses the multiple attribute.

Do not assume that the selected attribute always represents the option's current state after user interaction. It represents the default selected state defined by the HTML.

Do not confuse selected with checked. The selected attribute applies to <option> elements, while checked is used with applicable <input> controls such as checkboxes and radio buttons.

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 selected attribute on the <option> element is widely supported 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 selected Attribute

The example uses the selected attribute to make "Web Hosting" the default selection in the drop-down list.

Summary

The HTML selected attribute is a boolean attribute used with the <option> element to define its default selected state. A single-selection <select> must not contain more than one option with the selected attribute, while a <select multiple> can have multiple options selected by default. The user's current selection can differ from the default selection after interacting with the control.