The <select> Element

Technical Summary

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

The leading button is permitted only for a drop-down select and must be its first element child. The HTML Standard marks that button inert: it replaces the select's in-page rendering and is not a separate submit control. The option list, selected option, and form value still belong to the select. See the option page for the allowed option content and the exact relationship between option children, its label attribute, and selectedcontent.

Customizable drop-down select

A customizable drop-down keeps the native select control and its selection model while allowing structured markup for the button and picker content. The optional first-child button can contain one selectedcontent; the latter reflects the currently selected option's child nodes. This mechanism is enabled only for a single-select: it does not provide selected content for a multiple select.

<label for="fruit">Fruit</label>
<select id="fruit" name="fruit">
  <button type="button">
    <selectedcontent></selectedcontent>
    <span aria-hidden="true">⌄</span>
  </button>
  <div class="option-group">
    <optgroup>
      <legend>Fruit</legend>
      <option value="apple"><img src="apple.svg" alt="">Apple</option>
      <option value="pear"><img src="pear.svg" alt="">Pear</option>
    </optgroup>
  </div>
</select>

Part	Specification boundary	What to verify in an implementation
First-child button	Optional, drop-down only, and inert; it is part of the select's rendering	Picker opening, focus, keyboard behavior, and accessible name/state are still browser observations
selectedcontent	Copies the selected option's child-node structure; it does not copy text from an option's label attribute	Check the displayed selected item after user and DOM selection changes
optgroup / legend	A first-child legend supplies the group label; the group itself is not selectable	Check group label exposure and its relationship to child options
appearance: base-select	The CSS Basic User Interface Module Level 4 Working Draft defines it for select and ::picker(select)	Support, picker behavior, forced-colors behavior, and interaction must be measured per browser/version

select,
select::picker(select) {
  appearance: base-select;
}

The HTML structure and CSS styling are separate: appearance: base-select opts the select and its picker into a styleable base appearance where implemented. The CSSWG document is a Working Draft, and this page does not infer a browser support matrix from the draft or from the selected legacy-select observations. See optgroup, option, and legend for their respective content and label rules.

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.

Evidence

1. HTML Standard: The select element — meaning, categories, content model, attributes, selection, and DOM interface
2. HTML Standard: The option element — option values, selectedness, the selected attribute, and option lists
3. HTML Standard: The optgroup element — grouping options and labels
4. HTML Standard: The selectedcontent element — selected option child copying and the single-select boundary
5. CSS Basic User Interface Module Level 4, Working Draft (6 May 2026): appearance — base-select on select and ::picker(select)
6. HTML Standard: Form control infrastructure — form owners, disabled state, constraint validation, and shared control infrastructure
7. 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.

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
• ReviewedSpecification-defined customizable drop-down structure, inert first-child button, selectedcontent child-copying and single-select boundary, optgroup legend precedence, and the CSSWG base-select styling hook
• OpenBrowser/version matrix for picker opening, keyboard and pointer interaction, rendering, forced-colors, and selectedcontent update behavior; targeted WPT runs and cross-browser accessibility observations remain pending
• 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.