<select>, <option> & <optgroup> Tags in HTML

Quick facts

Category	Flow content, phrasing content, interactive content, form-associated (listed, labelable, submittable, resettable)
Content model	Zero or more <option>, <optgroup> and <hr> elements
Tag omission	<select>: neither tag can be omitted. <option> and <optgroup> end tags may be omitted when another option/group follows, but writing them is best practice
Permitted parents	<select>: Any element that accepts phrasing content (usually inside a <form>). <option>: <select>, <optgroup> or <datalist>
DOM interfaces	`HTMLSelectElement`, `HTMLOptionElement`, `HTMLOptGroupElement`

Syntax

<select name="size">
  <option value="s">Small</option>
  <option value="m" selected>Medium</option>
  <option value="l">Large</option>
</select>

Live example

Edit the code below and watch the preview update instantly.

index.html

Preview

Open in Full Editor →

Attributes

<select>

Attribute	Description
name	The name sent with the chosen value when the form is submitted
multiple	Lets the user choose more than one option
size	How many options are visible at once (turns the dropdown into a list box)
required	The user must choose an option with a non-empty value before submitting
disabled	Turns the whole control off
autocomplete	A hint for the browser’s autofill, e.g. `country`

<option>

Attribute	Description
value	The value sent with the form. If missing, the option’s text is sent
selected	Makes this option chosen by default
disabled	The option is shown but can’t be chosen
label	A shorter text to show instead of the option’s content

<optgroup>

Attribute	Description
label	Required. The group heading shown in the list
disabled	Disables every option in the group

Common examples

Read the chosen value with JavaScript

Listen for the change event and read .value, which is the chosen option’s value.

<label for="plan">Plan</label>
<select id="plan">
  <option value="free">Free</option>
  <option value="pro">Pro</option>
</select>
<p id="out"></p>

<script>
  document.getElementById("plan").addEventListener("change", e => {
    document.getElementById("out").textContent = "You chose: " + e.target.value;
  });
</script>

A custom-styled dropdown

Remove the browser’s default look with appearance: none, then add your own border and arrow.

<select class="nice">…</select>

<style>
  .nice { appearance: none; padding: 0.6rem 2.2rem 0.6rem 0.8rem; border: 1px solid #ccc; border-radius: 8px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' fill='none' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 0.8rem center; }
</style>

Disable an option that isn’t available

A disabled option is shown but can’t be chosen — handy for “out of stock” sizes.

<select name="size">
  <option>Small</option>
  <option disabled>Medium (sold out)</option>
  <option>Large</option>
</select>

<select> vs radio buttons

Both let people pick one option from a list, but they suit different situations. Radio buttons (<input type="radio">) show every choice at once, so people can compare them without clicking — best for a handful of options, roughly two to five. A <select> hides the choices in a dropdown, which saves space when there are many options, such as countries or years.

If people need to type to find their option in a long list, consider a text <input> with a <datalist> of suggestions instead.

	<select>	Radio buttons
Best for	Many options	2–5 options
Options visible	After a click	All the time
Space used	Compact	More

Common mistakes to avoid

No label. Every select needs a <label>; the first option is not a label.
A placeholder option without required. “Choose…” with an empty value lets the form be sent with nothing chosen unless the select is required.
Very long, unsorted lists. Hundreds of options in random order are painful; sort them logically, group them with <optgroup>, or use a searchable input.
Navigating as soon as an option is picked. Jumping to a new page on change is confusing for keyboard users, who change options with the arrow keys; add a “Go” button instead.

Accessibility & SEO tips

Keep option text short and clear, and put the most common choices first or pre-select them with selected.
Use the autocomplete attribute (for example autocomplete="country") so browsers can fill it in for visitors.
Native selects work well with screen readers and on phones (which show a large, touch-friendly picker) — think twice before replacing them with a custom JavaScript dropdown.

Browser support

Supported in every browser. Mobile browsers show their own touch-friendly picker for <select>, which is one reason to keep using the native element.

Tutorials: How to make a dropdown menu, HTML forms tutorial

Related tags

Frequently asked questions

How do I add a placeholder like "Choose an option" to a <select>?

Add a first option with an empty value, and make it disabled and selected: <option value="" disabled selected>Choose…</option>. Add required to the <select> so the form can't be sent without a real choice.

How do users pick more than one option?

Add the multiple attribute. Users then hold Ctrl (Windows) or Cmd (Mac) while clicking. Because this is hard to discover, a list of checkboxes is often easier for people to use.

Can I style a <select> dropdown?

You can style the closed box (border, padding, font, colors). The open list of options is drawn by the browser and is hard to style. Many sites set appearance: none and add their own arrow icon.

How do I get the selected value in JavaScript?

Read the select's value property, for example document.querySelector("select").value. To react when it changes, listen for the change event.

How do I set which option is selected?

Add the selected attribute to the option in HTML, or set the value in JavaScript, for example select.value = "pro".

Can options contain images or icons?

Not in a standard <select>: options can only contain text. For image choices, use radio buttons with images in their labels, or build a custom list component.