<select>

Syntax

<select name="choice">
  <option value="1">Option One</option>
  <option value="2">Option Two</option>
</select>

Examples

<label for="country">Country:</label>
<select id="country" name="country">
  <option value="uk">United Kingdom</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
</select>

<select name="role" required>
  <option value="" disabled selected>Choose a role...</option>
  <option value="student">Student</option>
  <option value="developer">Developer</option>
</select>

<select name="language">
  <optgroup label="Frontend">
    <option value="js">JavaScript</option>
    <option value="ts">TypeScript</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="php">PHP</option>
    <option value="python">Python</option>
  </optgroup>
</select>

Attributes

• name (string): Identifies the field in submitted form data
• multiple (boolean): Allows selecting more than one option
• required (boolean): Requires a non-empty selection before submission
• disabled (boolean): Disables the entire dropdown

Best practices

• Use a disabled, selected placeholder option instead of leaving the first real option selected by default
• Pair with a <label> for accessibility, same as any other form control
• Use optgroup to organize long lists of options into logical categories
• For a handful of mutually exclusive options, consider whether radio buttons might actually be clearer than a dropdown

Browser compatibility

Related HTML documentation

Specifications & further reading

• HTML Living Standard