Select and Options
Build dropdown menus with select and option.
Syntax
<select><option>Choice</option></select>The <select> element creates a dropdown menu. Each choice is an <option> element.
Useful attributes
selected— makes an option the default choice.value— the data sent when that option is chosen.
Example
Loading editor…
Press Run to see the result.
When to use it
- A checkout form uses <select> for country selection, keeping 200+ options hidden until the user opens the dropdown.
- A filter sidebar uses <select multiple> to let users pick several product categories at once.
- A date-of-birth form uses three linked <select> dropdowns for month, day, and year.
More examples
Basic dropdown select
The empty-value first <option> acts as a placeholder; the selected option value is sent with the form.
<label for="country">Country</label>
<select id="country" name="country">
<option value="">-- Select country --</option>
<option value="us">United States</option>
<option value="gb">United Kingdom</option>
<option value="de">Germany</option>
</select>Select with option groups
<optgroup> visually groups related options under a label without making them selectable themselves.
<label for="course">Pick a course</label>
<select id="course" name="course">
<optgroup label="Frontend">
<option value="html">HTML Basics</option>
<option value="css">CSS Fundamentals</option>
</optgroup>
<optgroup label="Backend">
<option value="node">Node.js</option>
<option value="python">Python</option>
</optgroup>
</select>Multi-select list box
multiple allows more than one option to be chosen; size sets how many rows are visible without scrolling.
<label for="skills">Skills (hold Ctrl/Cmd to select multiple)</label>
<select id="skills" name="skills" multiple size="4">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="git">Git</option>
</select>
Discussion