The <option> Element
As defined in the HTML Living Standard, the <option> element represents an option in a <select>, <optgroup>, or <datalist> element.
<select>
<option value="val1">Visible Label 1</option>
<option value="val2" selected>Visible Label 2</option>
</select>
View HTML Living Standard: The option element
Key Attributes
value: The data value submitted to the server. If this attribute is omitted, the text content of the element is used as the value.selected: A boolean attribute that indicates the option is the default selection when the page loads.disabled: A boolean attribute that makes the option unselectable and often greys it out visually.label: Provides a shorter label for the option. If present, browsers may use this in place of the element's text content in certain UI contexts.
WCAG Requirement: Name, Role, Value
Success Criterion 4.1.2 (Level A): For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically determined.
The <option> element provides the "Value" part of this requirement. Assistive technology relies on the relationship between the <select> (the role) and its <option> children to present a list of choices. When a user navigates the list, the "state" (whether an option is selected or disabled) is communicated programmatically.
Usage in Different Contexts
The behavior of the <option> element changes slightly depending on its parent:
- Inside
<select>: Represents a definitive choice in a dropdown or list box. - Inside
<datalist>: Represents a suggestion for an autocomplete field. The user can choose a suggested option or type their own. - Inside
<optgroup>: Inherits the grouping context provided by the parent group's label.
A11y Tip: Concise Text
Keep the text content of your <option> tags concise. Users navigating via screen readers or switch controls benefit from clear, brief labels that don't require listening to long strings of text before reaching the next choice.