References

Beginner-friendly references for web development, with live, editable examples.

The HTML <select> tag

Q: How do I make a drop-down list in HTML?

Use a containing elements for each choice, and pair it with a .

Q: How do I set a default selected option?

Add the selected attribute to the you want pre-chosen.

Q: How do I allow multiple selections?

Add the multiple attribute. The control becomes a list box from which several options can be chosen.

Element All modern browsers Updated June 22, 2026

Quick answer

The HTML <select> element creates a drop-down list. It contains <option> elements (optionally grouped with <optgroup>), and the multiple attribute turns it into a multi-select list.

Overview

The <select> element presents a list of choices as a drop-down menu. Each choice is an <option>, and related options can be gathered under labeled <optgroup> headings to keep a long list organized.

By default it shows a single-line drop-down, but the size attribute turns it into a scrolling list box, and multiple lets the user pick several options at once. The value that gets submitted is the selected option's value (or its visible text if it has none), and you mark a default choice with the selected attribute on the option.

Like every form control, a <select> needs a <label>. If you want to suggest values while still allowing free typing, a <input> with a <datalist> is the better fit than a <select>, which restricts the user to the listed options.

Syntax

<label for="c">Country</label>
<select id="c" name="country">
  <option value="uk">United Kingdom</option>
  <option value="us">United States</option>
</select>

Attributes

The <select> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute	Value	Description
`disabled`	A boolean attribute — present or absent.	Disables a form control.
`form`	The id of a `<form>` element.	Associates a control with a form by id.
`multiple`	A boolean attribute — present or absent.	Allows multiple values or selections.
`name`	A string (the field name used in the submitted data).	Names a form control for submission.
`required`	A boolean attribute — present or absent.	Marks a form control as mandatory.
`size`	A positive integer.	Sets the visible size of the control.

Example

Live example

<label for="f">Favorite fruit</label>
<select id="f" name="fruit">
  <optgroup label="Common">
    <option>Apple</option>
    <option selected>Banana</option>
  </optgroup>
  <optgroup label="Tropical">
    <option>Mango</option>
  </optgroup>
</select>

More Examples

Multi Select Dropdown JS

2,420 0

Best practices

Always pair a <select> with a <label>.
Group long lists into labeled sections with <optgroup>.
Mark the default choice with selected on the relevant <option>.
When users should be able to type a value not in the list, use an <input> with a <datalist> instead.

Frequently asked questions

How do I make a drop-down list in HTML?

Use a <select> containing <option> elements for each choice, and pair it with a <label>.

How do I set a default selected option?

Add the selected attribute to the <option> you want pre-chosen.

How do I allow multiple selections?

Add the multiple attribute. The control becomes a list box from which several options can be chosen.

How do I style a select drop-down?

Style the box with CSS; for full control over the arrow and menu, set appearance: none and add your own styling, or use the modern customizable select features where supported.

section slot