HTML <select> Element

The HTML <select> element creates a control containing a list of options from which users can choose one or more values.

Syntax

<label for="vegetable">Choose a vegetable:</label>
<select id="vegetable" name="vegetable">
  <option value="carrot">Carrot</option>
  <option value="lettuce">Lettuce</option>
  <option value="tomato">Tomato</option>
</select>

The <select> element requires both an opening and closing tag. The available choices are normally defined using <option> elements placed inside the <select> element.

Attributes

The <select> element supports the global HTML attributes and the following element-specific attributes:

Attribute	Description
`autocomplete`	Provides guidance about whether and how the browser may automatically complete the control.
`disabled`	Prevents the user from interacting with the select control.
`form`	Associates the select control with a form elsewhere in the document.
`multiple`	Allows the user to select more than one option.
`name`	Specifies the name used to identify the control when its value is submitted with a form.
`required`	Requires the user to select an acceptable option before the form can be submitted.
`size`	Specifies the number of options that should be visible in the control.

Example

This example uses the <select> element with several <option> elements to let the user choose a vegetable from a list.

Play in Editor

Usage Notes

Use the <select> element when users need to choose from a predefined set of options. The available choices are provided with <option> elements and can be organized into groups with <optgroup>.

By default, a <select> control allows one option to be selected. Add the multiple attribute when users should be able to select more than one option.

The name attribute identifies the control when its selected value is submitted with a form. Each <option> can use a value attribute to specify the value that will be submitted.

Use the selected attribute on an <option> element when a particular option should initially be selected.

A <select> element can be associated with a <label> by matching the label's for attribute with the select element's id.

Accessibility

Provide every <select> control with a clear accessible label. In most cases, use a visible <label> element whose for attribute matches the id of the <select> element.

Option text should clearly describe each available choice. When a list contains several categories of related choices, <optgroup> can help organize the options and make the list easier to understand.

Be careful when using the multiple attribute because selecting multiple items may require keyboard or pointer techniques that are not obvious to every user. Provide instructions when the required interaction may not be clear.

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 <select> Element .

The <select> element is closely related to the <option> element for individual choices, the <optgroup> element for grouping related options, the <label> element for identifying the control, and the <form> element for collecting and submitting form data.

Specifications

HTML Living Standard: The <select> Element

HTML <select> Element