HTML select dropdown generator with option groups and a preselected value

How to use the select dropdown generator

1. Type the options in Options, one per line. Write value|label, or only a label to have the value made for you.
2. Start a line with # to open a group, for example # Europe. End an option with a space and * to preselect it.
3. Fill in the Label and the name.
4. Add a First empty option (optional), such as “Choose a country”.
5. Tick Allow multiple and Required as needed.
6. Copy the code and open the dropdown in the Preview.

What it does and when to use it

A select lets people choose from a fixed list without typing, which keeps data consistent: every country, plan or size arrives spelled the same way. Long option lists are tedious to write by hand, and small mistakes such as a missing </optgroup> or a duplicated selected are easy to miss. The generator writes the whole control from a plain list.

It always adds a visible label linked with for and id, so screen readers announce what the dropdown is for and a click on the label opens it. For a form with several fields at once, use the HTML Form Generator. For a single text, email or date field, use the HTML Input Generator.

How it works

Each non-empty line is read in order. A line starting with # closes any open group and opens <optgroup label="…">. Lines with | are split into value and label. Lines without it use the text as the label and a slug of it as the value: “Green” becomes green, “New Zealand” becomes new-zealand. A trailing * adds selected. The id comes from the name, or from the label if the name is empty. Text is HTML-escaped. The code is built in your browser.

Worked examples

The sample country list puts India first and preselected inside an Asia group:

<optgroup label="Asia">
  <option value="in" selected>India</option>
  <option value="jp">Japan</option>

The Europe group follows, and the list starts with <option value="">Choose a country</option>.

Colours with multiple selection. Options Red, Green * and Blue, label “Colour”, name “colour”, no placeholder, not required, multiple ticked:

<label for="colour">Colour</label>
<select id="colour" name="colour[]" multiple>
  <option value="red">Red</option>
  <option value="green" selected>Green</option>
  <option value="blue">Blue</option>
</select>

Limits and tips

• Multiple selects are hard to use on desktop, since people must hold Ctrl or Cmd. For a few choices, checkboxes are clearer.
• Only one option should be preselected in a single select; if several are marked, browsers show the last one.
• Values are case-sensitive on most servers. Keep them in one style, such as lower case.
• A dropdown that only navigates to other pages is better built as links; the HTML Nav Menu Generator makes those.