The <select> Element
Technical Summary
The select element represents a form control for selecting from a set of options. Without multiple, it selects one option; with multiple, it can select zero or more options.
A select is form-associated, labelable, listed, submittable, and resettable. Current selection is represented by an option's selectedness, and selected option values participate in the form's entry list.
Definition / Categories
| Item | Specification summary |
|---|---|
| Meaning | A control for selecting from a set of options |
| Context | Where phrasing content is expected |
| Categories | Flow, phrasing, interactive, listed, labelable, submittable, resettable, form-associated, and palpable |
| Content model | For a drop-down box, zero or one leading button, followed by option, optgroup, hr, script-supporting, noscript, or div content |
| Tag omission | Neither the start tag nor the end tag is omissible |
Current customized-select work also makes a leading button and selectedcontent relevant. This initial coverage centers the long-established option and optgroup model and leaves customized-select implementation differences in Open Issues.
Single selection, multiple selection, and display size
| Condition | Meaning / display boundary | Main consequence |
|---|---|---|
No multiple | Single selection | Normally one option is selected; selecting another option makes the others not selected |
multiple present | Multiple selection | Zero or more options can be selected, and multiple values can be submitted |
size greater than 1 | May be rendered as a list box | Multiple visible rows and an accessibility mapping boundary are involved |
size omitted | The default display size depends on the selection mode | Do not confuse the attribute value with the historical IDL default behavior |
multiple is not only a visual switch. It changes the number of values, interaction model, form submission, and accessibility mapping boundary.
Option list and selectedness
The option list is formed from the option elements in the select's relevant tree order. An optgroup organizes options; it is not itself selectable.
| Concept | Meaning | What to check |
|---|---|---|
selected attribute | Markup-level initial selection request | It is related to the default state used by form reset |
| Selectedness | Whether an option is selected now | It can change through user interaction or DOM APIs |
selectedIndex | The index of the first selected option | It is -1 when no option is selected |
value | The value of the first selected option | It is the empty string when no option is selected |
<select id="format" name="format">
<option value="html">HTML</option>
<option value="markdown" selected>Markdown</option>
</select>
The selected attribute and current selectedness are not the same thing. Use select.value, select.selectedIndex, and select.selectedOptions according to whether the code needs the current value, index, or selected option collection.
Content attributes and form association
| Attribute | Role | Condition / boundary |
|---|---|---|
name | Name used by form submission and form.elements | Give the submitted control a meaningful name |
multiple | Allows zero or more options to be selected | Changes submitted value count and UI / AAM boundaries |
size | Number of option rows to show | A valid positive non-negative integer; also relates to display and accessibility state |
required | Requires a value to be selected | Has a special boundary with a placeholder label option |
disabled | Makes the control non-interactive | Relates to constraint validation and exclusion from form submission |
form | Explicitly sets the form owner | Can associate a control outside the ancestor form with a form in the same document |
autocomplete | Autofill hint | Uses the shared form-control autocomplete processing |
Associate a label explicitly by matching the label's for and the select's id, or implicitly by placing the select inside the label.
<label for="country">Country</label>
<select id="country" name="country">
<option value="jp">Japan</option>
<option value="us">United States</option>
</select>
Required and the placeholder label option
For a single-select whose required attribute is present and whose display size is 1, the first option can be a placeholder label option when it is a direct child of the select and has an empty value. Leaving that option selected makes the control suffer from the missing-value constraint.
<select name="plan" required>
<option value="">Choose a plan</option>
<option value="basic">Basic</option>
<option value="pro">Pro</option>
</select>
When multiple is present or the display size is greater than 1, the single-select placeholder rules do not apply unchanged. Check the selection mode, display size, option position, and option value together.
Form submission
When a select is not disabled and satisfies the relevant submission conditions, its name and the values of its selected options participate in the form's entry list. A single select normally contributes one value; a multiple select can contribute several entries with the same name.
This boundary includes more than reading a value: successful controls, disabled state, form owner, entry-list construction, encoding, and server-side interpretation all matter. Browser constraint validation is not a replacement for server-side validation.
DOM interface
The select element is exposed as HTMLSelectElement. The interface covers the option collection, current selection, form validation, and label relationship.
const select = document.querySelector('select');
select.value;
select.selectedIndex;
select.selectedOptions;
select.options;
select.form;
select.labels;
select.validity;
select.checkValidity();
| API | Summary |
|---|---|
options | The HTMLOptionsCollection for the option list |
selectedOptions | An HTMLCollection of options whose selectedness is true |
selectedIndex | Index of the first selected option; it can also be set |
value | Value of the first selected option; it can also be set |
willValidate / validity | Participation in constraint validation and current state |
checkValidity() / reportValidity() | Check constraints and report them to the user |
showPicker() | Shows the applicable picker UI subject to activation and security conditions |
Fact / Evidence
Major facts are mapped to their conditions, review state, and specification locations. Browser behavior and assistive-technology observations are separated into Implementation Evidence below.
| Type | Fact / claim | Condition / scope | Status | Evidence |
|---|---|---|---|---|
| SPEC | The select element represents a form control for selecting from a set of options. | The HTML Standard select element definition. | Reviewed | HTML Standard: the select element |
| SPEC | Without multiple selection is single; with it, zero or more options may be selected. | Selection mode and form-submission boundary. | Reviewed | HTML Standard: multiple |
| SPEC | The selected attribute, selectedness, selectedIndex, and value are distinct concepts. | Initial state, user interaction, and current DOM state. | Reviewed | HTML Standard: the option element |
| SPEC | A required single select can have a placeholder label option when the specified conditions are met. | No multiple, display size 1, direct first option, and an empty value among the relevant conditions. | Reviewed | HTML Standard: placeholder label option |
| SPEC | select is form-associated, so name, form, disabled, and constraint validation interact. | Form owner, successful controls, entry list, and validation infrastructure. | Reviewed | HTML Standard: form control infrastructure |
Evidence
- HTML Standard: The select element — meaning, categories, content model, attributes, selection, and DOM interface
- HTML Standard: The option element — option values, selectedness, the selected attribute, and option lists
- HTML Standard: The optgroup element — grouping options and labels
- HTML Standard: Form control infrastructure — form owners, disabled state, constraint validation, and shared control infrastructure
- HTML Accessibility API Mappings — accessibility API boundaries for list-box and drop-down-box select controls
Implementation Evidence
Browser implementation, WPT, and accessibility observations are recorded separately from specification claims. Unexecuted items are not treated as confirmed.
Shared fixture / environment: A labeled single select, an empty-valued placeholder label option, required, a multiple select, a disabled option, and a submit button inside <form id="evidence-form" method="get">. Chrome 152.0.0.0 / Windows NT 10.0 / checked 2026-09-13.
| Type | Observation scope | Conditions to record | Status |
|---|---|---|---|
| IMPL | Single / multiple mode, selectedness, value, selectedIndex, required, disabled, and form owner | Initially the single select had value="", selectedIndex=0, selectedOptions.length=1, and matched :invalid; the multiple select had no selected options. Changing the single select to ja and the multiple select to a,c updated the values; disabled option b remained unavailable. Both form owners were evidence-form. | Reviewed |
| WPT | Tests related to the select element, option selectedness, required, multiple, and form submission | Mapped to select-parsing.html, select-options-id.html, and select-events.optional.html. On 2026-09-15 in Chrome 152.0.0.0 / Windows NT 10.0, parsing and options passed 20/20 on wpt.live; events passed 0/2 because action_sequence() is not implemented by testdriver-vendor.js. Unselected WPT coverage and other browsers remain open. | Partial (20/22 pass) |
| AAM | Accessible name from label, single select drop-down box, multiple / size > 1 list box, required and disabled states | Chrome 152.0.0.0 / Windows NT 10.0 / 2026-09-13. The AX tree exposed the single select as a collapsed pop-up button named “単一選択” and the multiple select as a list named “複数選択”; selected and disabled option states were also reflected in the tree. | Observed |
Use the WPT repository for test correspondence and HTML-AAM for the accessibility mapping baseline.
Coverage / Open Issues
- ReviewedMeaning, categories, content model, single / multiple modes, option lists, main attributes, and the HTMLSelectElement API overview
- ReviewedThe basic boundary between the required attribute, placeholder label options, the selected attribute, and selectedness
- OpenAll branches of the form submission algorithm, entry list, disabled options, encoding, and the formdata event
- OpenCustomized selects, leading buttons, selectedcontent, picker UI, and browser-specific implementation differences
- OpenThis implementation and AX observation covers one Chrome environment only. Complete HTML-AAM mappings, assistive-technology observations, WPT execution, historical changes, compatibility, and Expert-gap Review remain unregistered.
This page is initial coverage. It does not claim that the entire select element has been verified, that all browsers expose the same UI and interaction, or that assistive technologies produce identical results.
Related surface
For a beginner-friendly explanation of options, display labels and submitted values, and selected / disabled choices, see the option element page in Yugien. Choice grouping and disabled-group boundaries are covered by optgroup in Atlas. The full select selection model is covered by the select element in Atlas; shared submission and constraint-validation processing by the form element in Atlas; label association by the label element; and boundaries with other form controls by the input and button elements.