HTML <option> Element
The HTML <option> element represents an individual choice within a <select> element, <optgroup> element, or <datalist> element.
Syntax
<select>
<option value="value">Option text</option>
</select>The <option> element defines a choice available to the user. The text inside the element is normally displayed in the control, while the value attribute specifies the value associated with that choice.
Attributes
The <option> element supports the global HTML attributes and the following element-specific attributes:
| Attribute | Description |
|---|---|
disabled |
Prevents the option from being selected by the user. |
label |
Provides a label for the option that can be used instead of the element's text content. |
selected |
Specifies that the option should be initially selected when the control is displayed. |
value |
Specifies the value associated with the option when the form control is submitted. |
Example
This example uses several <option> elements to provide a list of vegetables that can be selected from a <select> menu.
Usage Notes
The <option> element is commonly placed directly inside a <select> element or grouped within an <optgroup>. It can also provide suggested values inside a <datalist>.
The value attribute determines the value associated with the option. If the attribute is omitted, the option's text content is used as its value.
Use the selected attribute when an option should be selected initially. In a single-selection <select>, only one option should be initially selected.
The disabled attribute makes an option unavailable for selection. An option can also become unavailable when it belongs to a disabled <optgroup>.
Accessibility
Use clear and descriptive text for each <option> so users can understand the available choices without relying on surrounding context.
The parent <select> control should have an accessible label, usually provided with a <label> element. When a long list contains distinct categories, <optgroup> elements with meaningful labels can make the choices easier to understand.
Avoid using disabled options as the only way to provide important instructions. Instructions should remain available to users independently of whether a particular option can be selected.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <option> Element .
Related Elements
The <option> element is closely related to the <select> element that creates a selection control, the <optgroup> element that organizes related options, the <datalist> element that provides suggested values, and the <label> element used to label form controls.