Forms & Inputs

<select>, <option>, <optgroup>

Drop-down and multi-select menus.

1Selecting from a List

<select> creates a drop-down. Group related options with <optgroup>. Add the multiple attribute to allow multi-select.

Example Code

css

<label for="country">Country</label>
<select id="country" name="country">
  <optgroup label="Europe">
    <option value="fr">France</option>
    <option value="de">Germany</option>
  </optgroup>
  <optgroup label="Asia">
    <option value="in">India</option>
    <option value="jp">Japan</option>
  </optgroup>
</select>

2Put the element in context

A select provides a list of choices with native keyboard and platform behavior. Keep the label visible and options concise. For a very small set of mutually exclusive options, radio buttons may make the choices more discoverable without opening another control.

3Practice with a small page

Build a labeled service select with a neutral prompt and several meaningful values. Check which value is submitted and how the control behaves on a phone. Compare it with a short radio group to decide which interaction better fits the form.

Finished reading?

Mark this topic as complete to track progress.

<button> Tag

Next Topic

<textarea> Multi-line Input