# The “select” element cannot have more than one selected “option” descendant unless the “multiple” attribute is specified.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-select-element-cannot-have-more-than-one-selected-option-descendant-unless-the-multiple-attribute-is-specified
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `<select>` element provides a menu of options for the user. By default, it operates as a single-selection control — the user can pick exactly one option from the list. The `selected` attribute on an `<option>` element indicates which option should be pre-selected when the page loads. When two or more `<option>` elements have the `selected` attribute inside a single-choice `<select>`, this creates an invalid and contradictory state: the browser is told to pre-select multiple items in a control that only supports one selection.

When browsers encounter this contradiction, their behavior is inconsistent. Most will silently pick the last `<option>` marked as `selected` and ignore the others, but this is not guaranteed by the specification. Relying on undefined behavior leads to unpredictable results across browsers and can confuse both users and developers about which value will actually be submitted with a form.

From an accessibility standpoint, assistive technologies may announce the selected state of options to users. Multiple `selected` attributes on a single-choice `<select>` can cause screen readers to provide misleading or confusing information about which option is currently active.

The HTML specification (WHATWG) explicitly states that if the `multiple` attribute is absent, no more than one `<option>` descendant of the `<select>` may have the `selected` attribute.

## How to fix it

You have two options depending on your intent:

1. **If only one option should be pre-selected:** Remove the `selected` attribute from all but one `<option>`. This keeps the `<select>` as a standard single-choice dropdown.
2. **If multiple options should be pre-selected:** Add the `multiple` attribute to the `<select>` element. This changes the control from a dropdown to a list box where users can select multiple items (typically by holding Ctrl or Cmd while clicking). Keep in mind that this changes the visual appearance and interaction model of the control, so make sure it fits your design and use case.

## Examples

### Incorrect: multiple `selected` options without `multiple`

This triggers the validation error because two options are marked as `selected` in a single-choice `<select>`:

```html
<select name="color">
  <option value="red" selected>Red</option>
  <option value="green" selected>Green</option>
  <option value="blue">Blue</option>
</select>
```

### Correct: only one `selected` option

If the intent is a single-choice dropdown, keep `selected` on only one `<option>`:

```html
<select name="color">
  <option value="red" selected>Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
```

### Correct: multiple `selected` options with the `multiple` attribute

If the intent is to allow multi-selection and pre-select more than one option, add the `multiple` attribute:

```html
<select name="color" multiple>
  <option value="red" selected>Red</option>
  <option value="green" selected>Green</option>
  <option value="blue">Blue</option>
</select>
```

### Correct: no `selected` attribute at all

If you don't need any option pre-selected, you can omit `selected` entirely. The browser will typically display the first `<option>` by default:

```html
<select name="color">
  <option value="">Choose a color</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
```