Path // www.yourhtmlsource.com → Reference → <select>

<select>

by Ross Shannon

The <select> element creates a control that presents a menu of options. Users can select one or multiple options from the list. It is commonly displayed as a dropdown menu (single selection) or as a scrollable list box (multiple selection). The select element is ideal for presenting a fixed set of choices in a compact format.

Clock This page was last updated on 2025-11-17


Syntax

<select name="fieldname" id="fieldname">
  <option value="value1">Option 1</option>
  <option value="value2">Option 2</option>
</select>

The element requires both opening and closing tags. It must contain one or more <option> elements, and can optionally include <optgroup> elements to organize options into groups.

Attributes

  • name - The name used to identify the selected value(s) when the form is submitted
  • id - Unique identifier for associating with <label> elements
  • multiple - Allows selection of multiple options (displays as list box)
  • size - Number of visible options (default: 1 for single select, 4 for multiple)
  • required - Makes selection mandatory for form submission
  • disabled - Disables the entire select control
  • autofocus - Automatically focuses this control when page loads
  • autocomplete - Hints for browser autofill
  • form - Associates select with a form by ID (for selects outside the form)
  • aria-label - Accessible label when no visible label exists
  • aria-describedby - References element with additional description
  • aria-invalid - Indicates validation state
  • aria-required - Indicates field is required

Examples

Basic Dropdown

<label for="country">Select your country:</label>
<select id="country" name="country" required>
  <option value="">-- Please choose --</option>
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="ca">Canada</option>
  <option value="au">Australia</option>
</select>

Grouped Options

<label for="car">Choose a car:</label>
<select id="car" name="car">
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Multiple Selection

<label for="skills">Select your skills:</label>
<select id="skills" name="skills" multiple size="5"
        aria-describedby="skills-help">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
  <option value="python">Python</option>
  <option value="php">PHP</option>
</select>
<small id="skills-help">Hold Ctrl (Windows) or Cmd (Mac) to select multiple</small>

When to Use

Use the <select> element when:

  • Presenting 5 or more predefined options
  • Space is limited and a compact interface is needed
  • Users need to choose from a long list (countries, states, etc.)
  • Options are mutually exclusive (single selection)
  • Allowing users to select multiple items from a list

Accessibility and best practices:

  • Always pair with a <label> element using the for attribute
  • Include a placeholder option with empty value for required selects
  • Use <optgroup> to organize long lists into logical categories
  • Provide instructions for multiple selection controls
  • Consider using radio buttons for 2-4 options (more accessible)
  • For very long lists, consider autocomplete inputs with <datalist>
  • Test keyboard navigation (arrow keys should work within the select)
  • Avoid changing page content immediately on selection without warning
  • Use aria-describedby to link to additional help text
  • <option> - Individual options within the select
  • <optgroup> - Groups related options together
  • <form> - Container for form controls
  • <label> - Accessible labels for form controls
  • <datalist> - Provides suggestions for text inputs (alternative approach)
  • <input> - Radio buttons as alternative for few options