HTML Dropdown — Select Element Reference and Patterns

<form action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />

  <!-- Simple single-select -->
  <label>
    Country
    <select name="country" required>
      <option value="">— select —</option>
      <option value="us">United States</option>
      <option value="ca">Canada</option>
      <option value="uk">United Kingdom</option>
    </select>
  </label>

  <!-- Multi-select with optgroup -->
  <label>
    Topics you're interested in (hold Ctrl/Cmd for multiple)
    <select name="topics" multiple size="6">
      <optgroup label="Frontend">
        <option>React</option>
        <option>Vue</option>
        <option>Svelte</option>
      </optgroup>
      <optgroup label="Backend">
        <option>Node.js</option>
        <option>Python</option>
        <option>Go</option>
      </optgroup>
    </select>
  </label>

  <button type="submit">Submit</button>
</form>

The HTML dropdown is `<select>` with one or more `<option>` children. Each option has a `value` (submitted) and visible label text (displayed). Use the `selected` attribute to default-select an option; use `disabled` to disable individual options or the whole select.

Multi-select dropdowns use the `multiple` attribute on `<select>`. The submitted value becomes an array of selected option values — your backend receives multiple entries for the same field name. The `size` attribute controls how many rows are visible at once. UX warning: multi-select is hard for users — most people don't know to hold Ctrl/Cmd. For multi-choice, checkboxes are often better.

Group related options with `<optgroup label="...">`. The group label is visible (slightly indented header), the options appear inside. Useful for long dropdowns where users need visual orientation (countries grouped by continent, products grouped by category).

Custom-styled dropdowns are popular, but they almost always break accessibility, mobile UX, and keyboard navigation. Native `<select>` is harder to style but trivially accessible. If you must build a custom one, use Radix UI's `<Select>` primitive or another headless library that handles ARIA, keyboard, and focus management correctly.

Native <select> is the default. Custom only when you genuinely need it.