<option>

Overview

The <option> element is used to define individual items within dropdown lists like those created by the <select>, <optgroup>, and <datalist> elements. Each option signifies a distinct choice available to users in the list.

Examples and Usage

Dropdown lists in web forms are often populated using the <option> element, allowing users to select from a range of choices. Aside from specific selection, it can also function as a guiding placeholder, prompting users on the required action.

Consider the example below, which offers different beverage choices:

<label for="beverageSelect">Choose a beverage:</label>
<select id="beverageSelect">
    <option value="">--Please select your option--</option>
    <option value="coffee">Coffee</option>
    <option value="tea">Tea</option>
    <option value="juice">Orange Juice</option>
</select>

In this illustration:

• The <label> element, which reads "Choose a beverage:", provides clear instructions to users about the purpose of the dropdown menu. Its for attribute associates with the <select> element via the id, beverageSelect. This association aids in enhancing accessibility, particularly for screen readers, and offers a point of focus for users.

• The <select> element creates the dropdown menu. Its id attribute, beverageSelect, serves as a unique identifier, facilitating interactions with scripts and styles, and also connects it with the <label> element for accessibility.

• The first <option> with the content --Please select your option-- acts as a guiding placeholder. It helps users understand the action they need to take without being a valid selection itself.

• The subsequent <option> elements, such as <option value="coffee">Coffee</option>, represent individual beverage choices. The value attributes (e.g., "coffee") would be the data sent to the server upon form submission, while the text inside the tags (e.g., "Coffee") is what's displayed to the user, aiding in their decision-making.

Expanding on its use, <option> can be incorporated within <optgroup> to enable categorized selections or inside <datalist> to suggest input values. While the element is straightforward, its styling capabilities are limited. Customizing its appearance might not produce consistent results across different browsers.

Attribute Breakdown

In addition to global attributes, the <option> element supports specific attributes:

Accessibility Aspects

The <option> element inherently provides accessible dropdown choices. Its label, either from the label attribute or its text content, offers context to assistive technologies. From an ARIA perspective, <option> adopts the role=option, though this role is not recommended according to the specification. While global aria-* attributes are applicable, authors should not use the aria-selected attribute, and it's discouraged to assign roles other than option.

Associated Elements

• <button>
• <datalist>
• <fieldset>
• <form>
• <input>
• <label>
• <legend>
• <meter>
• <optgroup>
• <output>
• <progress>
• <select>
• <textarea>

Additional Notes

• An <option> can serve as a "placeholder label option" within a <select>. This doesn't represent a true selectable option but instead offers guidance or a default visual cue for the dropdown.

• While an <option> provides a means for users to make selections, the actual processing or utilization of these choices is typically handled by the encompassing form and any server-side scripts or APIs it interacts with. Specifically, a value of the element might be used in a server query, determining what data is fetched and displayed to the user.

• The visual representation and functionality of this element can be limited based on the browser or its parent elements, like a disabled <optgroup>.

Browser Compatibility

For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.

Useful Resources

Can I use HTML element: option

The HTML Living Standard Specification: option