? HTML <select> Element

⚡ Quick Overview

The HTML <select> element creates a dropdown (or list box) for choosing from predefined options. Use it for structured choices like countries, categories, or preferences. It works together with <option> for individual items and <optgroup> for grouping related options.

By default, a <select> is single-select. Add the multiple attribute to allow multi-selection, and use size to control how many items are visible without scrolling.

? Key Concepts

? Select Element

Represents a form control for choosing one or more options from a list.
Single-select by default; add multiple for multi-select behavior.
Can behave like a dropdown (small size) or a list box (with size > 1).

?️ Options & Groups

<option> defines each selectable item.
<optgroup label="..."> groups related options visually and semantically.
Each option can have its own value, selected, and disabled state.

? Syntax & Attributes

⚙️ <select> attributes

name: Field name submitted with the form. For multiple selections, many backends use a convention like name="fruits[]".
id: Pairs the control with a <label> via its for attribute.
multiple: Allows choosing more than one option.
size: Number of visible rows; useful with multi-select to show a list box.
required: Ensures at least one value is selected before submission.
disabled / autofocus: Disable the field or focus it on load.

? Option-level attributes

value: Value submitted with the form. If omitted, the option’s text is submitted.
selected: Preselects an option when the page loads.
disabled: Makes an option unselectable (e.g., “Not available”).
<optgroup label="...">: Labels a group of related options for clarity.

? Code Example

? View Code Example

<!-- Single-select with a placeholder option -->
<form action="#" onsubmit="return false;">
  <label for="country">Country</label>
  <select id="country" name="country" required aria-describedby="countryHelp">
    <option value="" disabled selected hidden>Select a country</option>
    <optgroup label="Europe">
      <option value="es">Spain</option>
      <option value="de">Germany</option>
    </optgroup>
    <optgroup label="Asia">
      <option value="in">India</option>
      <option value="jp">Japan</option>
    </optgroup>
  </select>
  <small id="countryHelp" class="help">Choose exactly one.</small>
</form>

<!-- Multi-select list box (note the name as an array for many backends) -->
<form action="#" onsubmit="return false;">
  <label for="fruits">Favorite fruits</label>
  <select id="fruits" name="fruits[]" multiple size="6" required aria-describedby="fruitsHelp">
    <optgroup label="Citrus">
      <option value="orange">Orange</option>
      <option value="lemon">Lemon</option>
      <option value="lime">Lime</option>
    </optgroup>
    <optgroup label="Berries">
      <option value="strawberry">Strawberry</option>
      <option value="blueberry">Blueberry</option>
      <option value="raspberry">Raspberry</option>
    </optgroup>
    <option value="apple" disabled>Apple (not available)</option>
  </select>
  <small id="fruitsHelp" class="help">Hold Ctrl (Windows) or 
  Command (Mac) to select multiple; Shift selects a range.</small>
</form>

? Live Output / Explanation

?️ Interactive Preview

Try selecting values in the dropdowns below, then click the buttons to preview what might be submitted as JSON data.

? Preview JSON

{ }

? Tips & Best Practices

Provide a disabled, selected placeholder option in single-select when using required.
Use size to show enough options in a multi-select list box without scrolling too much.
Group logically with <optgroup> and use stable value tokens (not visible labels).
For very long lists, consider searchable widgets (combobox) or server-side filtering.
On mobile, multi-select UI can be awkward — check whether checkboxes might be more usable.
Always include a name attribute or the selected values will not be submitted.
When using multiple, ensure the backend understands repeated names (e.g., name="items[]").
Prefer explicit value attributes so translations or label changes don’t break form handling.
Use placeholders for required single-selects so the user must actively choose a real option.
Split huge, ungrouped lists into <optgroup> sections to improve discoverability.

? Try It Yourself

Add a "States" dropdown that changes based on the selected country (cascading <select> elements).
Preselect an option with selected and add a disabled option for “Coming soon” items.
Send multi-select values to a preview area by serializing selectedOptions to an array (like in the example).
Convert a long flat list into grouped <optgroup> sections and compare how quickly you can find items.

? Summary

<select> creates dropdowns or list boxes for choosing one or more predefined values.
Use attributes like multiple, size, required, and name to control behavior and submission.
<option> and <optgroup> define individual choices and logical groupings.
Thoughtful placeholders, grouping, and values make your forms easier to use and simpler to process on the server.

HTML Form Select Element