HTML tagForms

<select>

A dropdown list the user picks one or more options from.

Display: inline-block
Closing tag: Required
Permitted content: Elements <option> and <optgroup>

On this page

Example
Definition and usage
Syntax
Attributes
Attributes in practice
Browser support
Good practices
Related entries

Example

HTML

<label for="lang">Course language</label>
<select id="lang" name="lang">
  <option value="pl" selected>Polish</option>
  <option value="en">English</option>
  <option value="de">German</option>
</select>

Preview

Definition and usage

The <select> element creates a choice list. You write the options as <option> elements, and you can group related options inside <optgroup>. When the form is submitted, the server receives the name=value pair of the chosen option.

A dropdown list saves space when there are many options: country, state, course language. With two or three options, radio buttons are often more convenient, because you can see every choice right away, without clicking anything.

With the multiple attribute, the list turns into a box where you can select several options (on a computer, by holding Ctrl or Cmd). This isn’t always intuitive, so for a multiple choice, consider a set of checkbox fields instead.

Syntax

<select name="name">
  <option value="a">Option A</option>
  <option value="b">Option B</option>
</select>

Attributes

name
text
The name the chosen option’s value is sent to the server under. A list without name won’t be sent.
multiple
boolean attribute
Lets you select several options. The list then displays as a scrollable box instead of a dropdown menu, and the server receives a separate name=value pair for each selected option.
size
number
The number of visible rows in the list. A value greater than 1 turns the dropdown menu into a fixed list box, even without multiple.
required
boolean attribute
Requires an option with a non-empty value to be selected. A popular pattern is a first option with an empty value, for example "Choose a city…", which acts as a hint and fails validation.
disabled
boolean attribute
Disables the entire list. The value of a disabled list isn’t sent with the form.

Attribute	Values	Description
name	text	The name the chosen option’s value is sent to the server under. A list without `name` won’t be sent.
multiple	boolean attribute	Lets you select several options. The list then displays as a scrollable box instead of a dropdown menu, and the server receives a separate `name=value` pair for each selected option.
size	number	The number of visible rows in the list. A value greater than 1 turns the dropdown menu into a fixed list box, even without `multiple`.
required	boolean attribute	Requires an option with a non-empty value to be selected. A popular pattern is a first option with an empty `value`, for example "Choose a city…", which acts as a hint and fails validation.
disabled	boolean attribute	Disables the entire list. The value of a disabled list isn’t sent with the form.

The element also supports all global attributes, such as class, id, style and hidden.

Attributes in practice

multiple

boolean attribute

Lets you select several options. The list then displays as a scrollable box instead of a dropdown menu, and the server receives a separate name=value pair for each selected option.

HTML

<label for="topics">What are you interested in?</label><br>
<select id="topics" name="topics" multiple>
  <option value="frontend" selected>Frontend</option>
  <option value="backend">Backend</option>
  <option value="mobile" selected>Mobile apps</option>
  <option value="ai">Artificial intelligence</option>
</select>

Preview

size

number

The number of visible rows in the list. A value greater than 1 turns the dropdown menu into a fixed list box, even without multiple.

HTML

<select name="level" size="3" aria-label="Level">
  <option>Beginner</option>
  <option>Intermediate</option>
  <option>Advanced</option>
</select>

Preview

required

boolean attribute

Requires an option with a non-empty value to be selected. A popular pattern is a first option with an empty value, for example "Choose a city…", which acts as a hint and fails validation.

HTML

<form>
  <select name="city" required aria-label="City">
    <option value="">Choose a city…</option>
    <option value="chi">Chicago</option>
    <option value="aus">Austin</option>
    <option value="sea">Seattle</option>
  </select>
  <button>Next</button>
</form>

Preview

disabled

boolean attribute

Disables the entire list. The value of a disabled list isn’t sent with the form.

HTML

<select name="plan" disabled aria-label="Plan">
  <option>Yearly plan</option>
</select>

Preview

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

Always connect the list to a <label>. A first option like "Choose…" doesn’t replace a label.
The appearance of a dropdown list can only partly be changed in CSS. The new mechanism for full styling (appearance: base-select) currently only works in some browsers.
For very long lists, such as hundreds of cities, consider a text field with <datalist> suggestions instead.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice HTML in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course