The <select> HTML Element

Overview

The <select> element creates a control that allows users to choose from a set of options, typically presented in a dropdown format.

Examples and Usage

In web forms, presenting users with multiple options in an organized manner is often necessary. The <select> element, combined with nested <optgroup> and <option> elements, provides a structured way to achieve this. For our demonstration, consider a scenario where we want users to choose a course from various categories:

<label for="select-course">Select a course:</label>
<select id="select-course" name="course">
    <optgroup label="Sciences">
        <option value="physics">Physics 101</option>
        <option value="biology">Biology 101</option>
    </optgroup>
    <optgroup label="Arts">
        <option value="history">World History</option>
        <option value="music">Introduction to Music</option>
    </optgroup>
    <optgroup label="Engineering">
        <option value="mech">Mechanical Engineering</option>
        <option value="comp">Computer Science</option>
    </optgroup>
</select>

In the example provided, the <label> element gives a descriptive prompt to the user. The association between the <label> and <select> is formed by matching the for attribute in the <label> with the id attribute in the <select>. This connection allows users to click the label to focus on the dropdown, improving user interaction.

Inside the <select> element, <optgroup> groups related <option> elements together. The label attribute of the <optgroup> categorizes the subsequent options, offering an organized dropdown navigation. Each <option> details individual choices the user can make. Along with the display text that users see, each <option> also contains a value attribute. This value is what gets transmitted during form submission, indicating the user's choice.

When rendered, users would encounter a dropdown menu. Upon interaction, they'd see categories like "Sciences", "Arts", and "Engineering" and, under each category, specific courses to select from.

Attribute Breakdown

In addition to global attributes, the <select> element comes with a set of specific attributes to customize its behavior.

Attribute	Description
`autocomplete`	Provides a hint for the browser's autocomplete feature.
`disabled`	Boolean attribute indicating if the user can interact with the control. If not specified, the control inherits its setting from a containing element.
`form`	Associates the `<select>` with a `<form>` element using the form's ID. Can associate `<select>` elements outside a form or override an ancestor `<form>` element.
`multiple`	Boolean attribute indicating if multiple options can be selected. If specified, typically displays as a scrolling list box.
`name`	Specifies the name of the control for form submission.
`required`	Boolean attribute indicating that a non-empty option must be selected for form submission.
`size`	Represents the number of rows visible at once in a list box. Default value is `0`, but this may vary across browsers.

Accessibility Aspects

When using the <select> element, its accessibility behavior varies based on its attributes. If the element has the multiple attribute or a size attribute greater than 1, it is recommended to have a role=listbox. For a <select> without these attributes, it adopts a role=combobox. In both cases, authors should avoid using the aria-multiselectable attribute. Proper ARIA roles and attributes can greatly improve the user experience, especially for those relying on assistive technologies.

Associated Elements

<option>
<optgroup>

Additional Notes

The size attribute's default value is typically 0. However, while the HTML specification suggests a default value of 1, adhering to this has caused issues in some websites. As a result, browsers like Firefox maintain a default of 0.
Achieving a consistent styling for the <select> element across browsers can be challenging. Developers seeking intricate designs might consider third-party solutions or custom implementations using JavaScript and WAI-ARIA.

Browser Compatibility

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

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	Yes*	Yes*	Yes*	Yes*	Yes	Yes*

Useful Resources

Can I use HTML element: select

The HTML Living Standard Specification: select