Runnable HTML Docs: Select Dropdown

Q: How do you create a dropdown list in HTML?

Use with one per choice: Red Blue . Give the select a name and a .

Q: How do I set the default option in a select?

Add selected to that option: Blue . Without it, the first option is selected. In JavaScript, set select.value = 'blue'.

Q: How do I add a placeholder to a select?

Make the first option empty and not selectable: Choose a country . Add required to the so the form cannot be sent until a real option is chosen.

Q: How do I get the selected value of a select in JavaScript?

select.value is the value of the selected option. For its visible text use select.selectedOptions[0].text, and listen for the change event to react when the choice changes. For a multiple select, map over select.selectedOptions.

Q: What is the difference between a select and a datalist?

A only allows the listed options. An with a suggests options while the reader types but accepts any text. Use select when the answer must be one of yours.

A dropdown list is a <select> element with an <option> for each choice. Each option's value is what the form sends; the text between the tags is what the reader sees. Choose one and press Submit:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Select</title>
</head>
<body>
  <form>
    <label for="lang">Course language</label>
    <select id="lang" name="language">
      <option value="py">Python</option>
      <option value="js" selected>JavaScript</option>
      <option value="java">Java</option>
      <option value="cpp">C++</option>
    </select>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

The form sends language=js: the select's name and the chosen option's value. selected sets the default; without it, the first option is chosen. If an option has no value, its text is sent instead.

Connect the label to the select with for and id (or by wrapping it) so clicking the label focuses the dropdown and screen readers announce it.

select and option attributes

Element	Attribute	Does
`<select>`	`name`	The key the value is sent under
`<select>`	`required`	A real option must be chosen, not an empty first placeholder option
`<select>`	`multiple`	Several options can be chosen
`<select>`	`size`	How many rows are visible (turns it into a list box)
`<select>`	`disabled`	The whole dropdown is off and not sent
`<option>`	`value`	What is sent when it is chosen
`<option>`	`selected`	Chosen when the page loads
`<option>`	`disabled`	Shown but cannot be chosen
`<optgroup>`	`label`	The group's heading

A placeholder option with required

A select always has a value, so without a placeholder the first real option is sent even if the reader never touched the dropdown. An empty first option fixes that, and required stops the submit until a real option is chosen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Placeholder</title>
</head>
<body>
  <form>
    <label>Country
      <select name="country" required>
        <option value="" disabled selected>Choose a country</option>
        <option value="br">Brazil</option>
        <option value="de">Germany</option>
        <option value="jp">Japan</option>
      </select>
    </label>
    <button type="submit">Continue</button>
  </form>
</body>
</html>

Press Continue before choosing: the browser refuses and asks you to select an item. The placeholder has value="", which is what required treats as empty, and disabled so it cannot be picked again once a country is chosen.

Grouping options with optgroup

<optgroup label="..."> puts a heading over a set of options. The heading is not selectable:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>optgroup</title>
</head>
<body>
  <form>
    <label>Car
      <select name="car">
        <optgroup label="Electric">
          <option value="model3">Model 3</option>
          <option value="ioniq">Ioniq 5</option>
        </optgroup>
        <optgroup label="Hybrid">
          <option value="prius">Prius</option>
          <option value="corolla">Corolla Hybrid</option>
        </optgroup>
      </select>
    </label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Groups cannot be nested: a list gets one level of headings, no more. disabled on an <optgroup> disables every option in it.

Multiple selection

multiple lets the reader choose several options, and turns the dropdown into a list box. Hold Ctrl (Cmd on a Mac) to add options one at a time, or Shift to select a range:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple select</title>
</head>
<body>
  <form>
    <label for="skills">Skills</label><br>
    <select id="skills" name="skills" multiple size="5">
      <option value="html" selected>HTML</option>
      <option value="css" selected>CSS</option>
      <option value="js">JavaScript</option>
      <option value="sql">SQL</option>
      <option value="git">Git</option>
    </select>
    <p><button type="submit">Submit</button></p>
  </form>
</body>
</html>

The form sends skills=html and skills=css: the same name once per chosen option. Many people do not know the Ctrl+click gesture, so for a handful of options, a group of checkboxes is easier to use.

Reading and setting the value in JavaScript

select.value reads and sets the chosen option's value, and the change event fires when the reader picks a different option. A common use is a second dropdown whose options depend on the first:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dependent dropdowns</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>Country
      <select name="country" id="country">
        <option value="fr">France</option>
        <option value="it">Italy</option>
      </select>
    </label>
    <label>City <select name="city" id="city"></select></label>
    <button type="submit">Submit</button>
  </form>
  <p id="out"></p>

  <script>
    const cities = { fr: ['Paris', 'Lyon', 'Nice'], it: ['Rome', 'Milan'] };
    const country = document.querySelector('#country');
    const city = document.querySelector('#city');

    const fill = () => {
      city.replaceChildren(...cities[country.value].map((name) => new Option(name, name.toLowerCase())));
    };
    const show = () => {
      document.querySelector('#out').textContent =
        'value: ' + city.value + ', text: ' + city.selectedOptions[0].text;
    };

    country.addEventListener('change', () => { fill(); show(); });
    city.addEventListener('change', show);
    fill();
    show();
  </script>
</body>
</html>

new Option(text, value) creates an option. select.selectedIndex is the position of the chosen option, and select.selectedOptions lists the chosen ones, which is how you read a multiple select.

Styling a select

The dropdown's open list is drawn by the browser and the operating system, and little of it can be styled. The closed box can: appearance: none removes the native arrow, and a background image puts your own in its place:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled select</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .styled {
      appearance: none;
      font: inherit;
      padding: 8px 36px 8px 12px;
      border: 2px solid #9ca3af;
      border-radius: 8px;
      background-color: #fff;
      background-image: 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' fill='none' stroke='%23111827' stroke-width='2'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      color: #111827;
    }
    .styled:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
  </style>
</head>
<body>
  <label>Default <select><option>Option one</option><option>Option two</option></select></label>
  <br><br>
  <label>Styled
    <select class="styled">
      <option>Option one</option>
      <option>Option two</option>
    </select>
  </label>
</body>
</html>

The extra end padding leaves room for the arrow so long option text does not run under it. font: inherit matters as much here as on buttons: selects use the browser's small form font by default. The options in the open list keep the native look. Chrome can style the open list too when you opt in with appearance: base-select; browsers without that support show the native list. Full control everywhere takes a custom widget built with ARIA, which is a lot more work to get right than it looks.

select, radio buttons or datalist?

Use	When
`<select>`	One choice from a long list, or where space is tight
Radio buttons	One choice from a few options that should all be visible (see HTML radio button)
`<input>` with `<datalist>`	Suggestions, but any typed value is allowed

Common mistakes

No placeholder on a required choice. The first real option is sent even if the reader never chose it.
A placeholder with a real value, such as value="none". required treats it as a valid choice. Use value="".
Options without value when the text is long or translated. The server receives the visible text, which changes with the language.
multiple for a few options. Checkboxes are easier to use.
Listening for click on options. Use change on the <select>; it also fires for keyboard changes.
No label. A select with only a placeholder has no name once an option is chosen.

Frequently Asked Questions

How do you create a dropdown list in HTML?

Use <select> with one <option> per choice: <select name="color"><option value="red">Red</option><option value="blue">Blue</option></select>. Give the select a name and a <label>.

How do I set the default option in a select?

Add selected to that option: <option value="blue" selected>Blue</option>. Without it, the first option is selected. In JavaScript, set select.value = 'blue'.

How do I add a placeholder to a select?

Make the first option empty and not selectable: <option value="" disabled selected>Choose a country</option>. Add required to the <select> so the form cannot be sent until a real option is chosen.

How do I get the selected value of a select in JavaScript?

select.value is the value of the selected option. For its visible text use select.selectedOptions[0].text, and listen for the change event to react when the choice changes. For a multiple select, map over select.selectedOptions.

What is the difference between a select and a datalist?

A <select> only allows the listed options. An <input> with a <datalist> suggests options while the reader types but accepts any text. Use select when the answer must be one of yours.

Related concepts