Select Dropdown Generator
Build select dropdowns from a simple list, with value and label pairs, multiple selection and required validation.
A <select> with your own options - one per line.
Live preview
<label for="country">Country</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="pk">Pakistan</option>
</select>About the select dropdown generator
A select is the right control when there are more than about five options. Below that, radio buttons show every choice at once and need one fewer interaction.
Options usually need a value distinct from the label: the label is what people read, the value is what the server stores. Writing them as value|Label keeps both in one line here.
How to use it
- 1Write the label and name.
- 2Add options one per line, using value|Label when they differ.
- 3Turn on multiple for multi-select.
- 4Copy the HTML.
Questions
Select or radio buttons?
Radios for five options or fewer, because every choice is visible and selecting takes one click. A select once the list is longer than that.
How do I add a placeholder option?
Add a first option with an empty value, marked disabled and selected, so it shows as a prompt but cannot be submitted.
Can I style a select fully?
Only partly. The dropdown list itself is drawn by the operating system. Full control requires a custom component built from a button and a listbox.