<select> Select menu
A drop-down menu of options.
<select> displays a drop-down built from <option> elements, optionally grouped with <optgroup>. On submit, the chosen option's value is sent under the select's name.
multiple allows several choices and size shows several rows at once. If the select is required, open with an empty option such as Choose... with value="", which forces a real choice. Connect a label every time.
multiple, size and required are covered in the select element in the HTML Living Standard (opens in a new tab). Practise in the Textarea, Select, Radio, Checkbox lesson.
Syntax
<label for="id">Label</label>
<select id="id" name="name">
<option value="a">Option A</option>
<option value="b">Option B</option>
</select>When to use it
Picking one item from a long, known list is the job for <select>: a country, a birth month, one of eight shipping methods. It takes little space, and nobody can mistype the answer.
With two to five options, radio buttons usually do better. Every choice is on screen at once and people compare them without opening anything, as with T-shirt sizes. For huge lists, or when people know exactly what they want (a city name, say), an input with a datalist lets them type and still offers suggestions, although any answer is accepted. If several items may be chosen, use a group of checkboxes. select multiple depends on Ctrl or Cmd clicks, and many users have never heard of them.
People jump through a long select by typing letters, so sort the options the way users expect, which is usually alphabetical. A select also hides its options. For a yes or no question, two radio buttons are the better fit.
Attributes
| Attribute | What it does |
|---|---|
name | Name sent with the chosen value. |
multiple | Allows choosing several options. |
size | Number of visible rows. |
required | A non-empty option must be chosen. |
disabled | Disables the control. |
autocomplete | Autofill hint, such as country. |
Live example
Edit the code and watch the preview.
<label for="pet">Favourite pet</label>
<select id="pet" name="pet" required>
<option value="">Choose...</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="fish">Fish</option>
</select>More examples
Country picker with autocomplete
Full country names on screen, short codes in the submitted data. With autocomplete="country" the browser can preselect the country the user saved earlier. The empty first option plus required forces a real choice before the form goes.
<form>
<label for="country">Country</label>
<select id="country" name="country" autocomplete="country" required>
<option value="">Choose a country</option>
<option value="CA">Canada</option>
<option value="DE">Germany</option>
<option value="IE">Ireland</option>
<option value="JP">Japan</option>
</select>
<button>Continue</button>
</form>Visible list box
Add size="4" and the select turns from a drop-down into a box showing four rows. On a help form, seeing several topics side by side makes it more likely people pick the right one.
<form>
<label for="topic">What do you need help with?</label><br>
<select id="topic" name="topic" size="4" required>
<option value="billing">Billing and payments</option>
<option value="delivery">Delivery</option>
<option value="returns">Returns and refunds</option>
<option value="account">My account</option>
<option value="other">Something else</option>
</select>
<button>Next</button>
</form>Tip: An empty first option plus required forces a real choice.
Browser support
select works in every browser and belongs to the HTML Living Standard. The browser or the operating system draws the drop-down, which is why phones look so different; many open a full-screen picker. appearance:base-select, a newer opt-in that makes selects fully styleable, has not reached every browser yet.
Accessibility
A native select works with keyboards and screen readers out of the box. Swapping it for a custom div dropdown means implementing the full ARIA combobox or listbox pattern yourself. Also avoid submitting on change without warning (WCAG 3.2.2). The W3C combobox pattern (opens in a new tab) shows everything a custom dropdown has to replicate.
Common mistakes
Wrong
<select>
<option>Red</option>
</select>Right
<label for="color">Color</label>
<select id="color" name="color">
<option value="red">Red</option>
</select>A label makes the select accessible and a name gets it submitted.
Frequently asked questions
How do I add a placeholder to a select dropdown?
Use a first option with an empty value, mark it selected and disabled, and make the select required: <option value="" selected disabled>Choose a country</option>. Users see the prompt but cannot pick it again, and the form stays unsubmitted until they make a real choice.
How do I allow multiple selections in a select?
Add the multiple attribute. The select turns into a list box where users hold Ctrl (Cmd on a Mac) or Shift to pick several options. A lot of people struggle with that, so for a handful of choices a group of checkboxes in a <fieldset> often works better. If your server expects an array, use brackets in the name, like name="tags[]". Wikipedia's drop-down list (opens in a new tab) article describes the widget in general.
Practise it
- Textarea, Select, Radio, Checkbox (Module 6: Forms)
- Project: Sign-up Form (Module 6: Forms)
- Connecting Labels (Module 8: Accessibility)
- Contact Page with Form (Module 10: Final Projects)