The <option> Element

Technical Summary

Definition / Categories

Item	Specification summary
Meaning	An option in select, or a suggestion in datalist
Categories	None
Context	A descendant of select, datalist, or optgroup
Content model	Depends on the presence of label and value, and on whether it is inside datalist. It can be text, or restricted phrasing content / div content
Tag omission	The end tag may be omitted before another option, optgroup, or hr, or at the end of the parent. Explicit end tags remain clearer for ordinary authoring

An option with both label and value has an empty content model. Without label and outside datalist, it can contain phrasing content or div elements, but no interactive descendants, descendant datalist or object, or descendant with tabindex. With label but no value, and whenever it is inside datalist, the content model is text.

Label and value

For the specification's label, a non-empty label attribute takes precedence; otherwise the value of the text IDL attribute is used. For the option's value, the value attribute takes precedence; otherwise collected option text is used.

Information	Resolution rule	Implementation point
UI label	Non-empty label attribute, otherwise option.text	Keep the display label separate from the submitted value
Option value	value attribute, otherwise collected option text	Explicitly set the submitted value so a display-text edit does not silently change it
Option text	Collect descendant text, strip and collapse ASCII whitespace, and skip script elements	textContent and option.text do not necessarily return the same result

<select name="format">
  <option value="html">HTML</option>
  <option value="markdown" label="Markdown"></option>
</select>

For ordinary authoring, putting the visible label in the child text and explicitly setting value is the easiest structure to read and audit. When using the less common label attribute form, check both the content model and the label-resolution rule.

Rich option content and selectedcontent

A select-option can contain structured, non-interactive content, including images and phrasing elements, when its content model allows it. The selectedcontent inside a single-select's first-child button is populated by copying the selected option's child-node structure. It does not copy the option's label attribute. The label algorithm and the displayed child structure are therefore related but not interchangeable.

<select name="language">
  <button type="button">
    <selectedcontent></selectedcontent>
  </button>
  <optgroup>
    <legend>Standards</legend>
    <option value="html"><span>HTML Standard</span></option>
    <option value="css"><img src="css.svg" alt=""><span>CSS UI</span></option>
  </optgroup>
</select>

Case	Content model / update rule	Review point
select option without label, outside datalist	Can contain phrasing content or div; interactive content and descendants with tabindex are prohibited	Rich content is still a non-interactive option, not an embedded widget
option label="…" value="…"	Content model is empty	Do not expect child markup to supply the selected button display
Single-select with enabled selectedcontent	Copies the selected option's child nodes; the option's label attribute is not copied	Check selection updates and the markup copied into the button
multiple select or option in datalist	The selectedcontent update algorithm is unavailable to multiple selects; datalist options have a text-only content model	Do not generalize customizable select markup to datalist suggestions

The selected option's value remains the form value; its child markup is display content. User-agent and assistive-technology treatment of rich option content is an implementation question and is not inferred here.

Selectedness and initial state

The selected attribute is a boolean attribute representing the option's default selectedness. Selectedness is the current state. User interaction or setting option.selected can change current state without making the HTML attribute mean the same thing.

Concept	Meaning	DOM counterpart
selected attribute	The initial-selection declaration recorded in HTML	option.hasAttribute('selected')
Default selectedness	The initial state and reset baseline	option.defaultSelected
Selectedness	Whether the option is selected now	option.selected
Dirtiness	A state that separates user or IDL changes from later effects of the selected attribute	Not exposed as a public IDL attribute

<select id="format">
  <option id="html" value="html">HTML</option>
  <option id="md" value="markdown" selected>Markdown</option>
</select>

const option = document.querySelector('#md');
option.defaultSelected; // true
option.selected;        // current selectedness
option.selected = false; // changes current state and sets dirtiness

In a select without multiple, setting one option's selectedness to true causes the other options in the same option list to become false. When comparing initialization, user interaction, DOM changes, and reset, record attributes and state separately.

Disabled and optgroup

An option is disabled when it has its own disabled attribute or is inside a disabled optgroup. Disabled prevents user selection, but it does not make every programmatic change to selectedness impossible.

<select name="plan">
  <option value="basic">Basic</option>
  <optgroup label="Discontinued" disabled>
    <option value="legacy">Legacy plan</option>
  </optgroup>
  <option value="pro">Pro</option>
</select>

The disabled attribute on optgroup affects options in that group. The group itself is not selectable; the selectable objects are the options.

Form submission and form owner

An option is not a listed or submittable form control. The parent select constructs the form entry list, and the values of selected options participate together with the select's name.

HTMLOptionElement.form returns the form owner of the nearest ancestor select; it does not mean that the option itself is form-associated. An option outside a select, or an option inside datalist, returns null.

Structure	option.form	Form meaning
form > select > option	The ancestor form	The selected option's value participates in the select's entry list
Select outside a form with a form attribute	The select's form owner	The option follows the form owner resolved by its select
datalist > option	null	The associated input's value, not the suggestion object itself, is submitted

DOM Interface

The option element is exposed as HTMLOptionElement. Use selected and defaultSelected, and use text and value for their respective purposes.

const option = document.querySelector('option');

option.disabled;
option.form;
option.label;
option.defaultSelected;
option.selected;
option.value;
option.text;
option.index;

const created = new Option('Pro', 'pro', true, false);

API	Summary
disabled	Boolean reflecting the option's own disabled attribute; effective disabledness can also come from a disabled optgroup
label	String reflecting the label attribute, or the resolved option label when absent
defaultSelected	Boolean reflecting the selected content attribute
selected	Reads and writes current selectedness; setting it also affects dirtiness
value	The option value, falling back to collected option text when the attribute is absent
text	Whitespace-normalized option text; setting it replaces the child content
index / form	Index in the option list and the form owner of the nearest select
new Option()	Legacy factory function whose arguments are text, value, defaultSelected, and selected

With three or fewer arguments, new Option('Pro', 'pro', true) sets the selected attribute but does not make initial selectedness true. The fourth argument explicitly sets initial selectedness.

Fact / Evidence

Normative definitions, states, and form relationships are recorded with their claims, conditions, status, and source locations. Browser implementation and accessibility-tree observations are kept separate in Implementation Evidence below.

Evidence

1. HTML Standard: The option element — context, content model, attributes, selectedness, label, value, and DOM interface
2. HTML Standard: The select element — option list, single / multiple selection, reset, and form-submission relationships
3. HTML Standard: The datalist element — using option as an input suggestion
4. HTML Standard: The selectedcontent element — selected option child copying, update rules, and the multiple-select boundary
5. HTML Accessibility API Mappings — option role, selected state, and disabled state boundaries
6. Web Platform Tests: select element — entry point for tests covering option, selectedness, and select behavior

Implementation Evidence

Browser implementation, WPT, and accessibility observations are recorded separately from normative claims. At page creation time, unrun items are not treated as reviewed.

Shared fixture / record: Fixture ID forms-core-v1 covers initial selectedness, selectedness changes and reset, label / value / text, disabled option and optgroup, FormData through select, option in datalist, and the HTMLOptionElement API. Chrome 152.0.0.0 / Windows 10 / checked 2026-09-15. All 14 checks passed.

This IMPL row records one Chrome DOM and form-API run. Until WPT results and AAM observations are available, the page does not register cross-browser implementation behavior inferred only from the specification.

Coverage / Open Issues

• ReviewedOption meaning, categories, usage contexts, content model, and primary attributes
• ReviewedLabel / value resolution, selected attribute versus selectedness, and disabled option / optgroup boundaries
• ReviewedPrimary HTMLOptionElement IDL, the relationship to select form submission, and option inside datalist
• OpenComparison outside the single Chrome run for selectedness initialization, attribute changes, option-list updates, disabled options, and FormData
• OpenIndividual WPT results, complete HTML-AAM mappings, expanded datalist suggestions, and assistive-technology observations
• ReviewedSpecification rules for rich option content, selectedcontent child copying and label-attribute behavior, the single-select boundary, and the separate datalist text-only model
• OpenTargeted WPT for customizable option content, accessibility exposure of rich options, browser/version differences, historical changes, and compatibility

This is initial coverage. It records the reviewed scope; it does not claim identical rendering, interaction, or accessibility API results in every browser, or complete verification of the option element.

Related surface

For a beginner-friendly explanation of choices, display labels, submitted values, and selected / disabled options, see Yugien's option element page. The full selection model is covered by Atlas on select; shared form-submission rules by Atlas on form; and control labeling by Atlas on label.