<optgroup> and <option>

Syntax

<select>
  <optgroup label="Group Name">
    <option value="1">Choice One</option>
  </optgroup>
</select>

Examples

<select name="size">
  <option value="s">Small</option>
  <option value="m">Medium</option>
  <option value="l">Large</option>
</select>

<select name="framework">
  <optgroup label="Frontend">
    <option value="react">React</option>
    <option value="vue">Vue</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="express">Express</option>
    <option value="laravel">Laravel</option>
  </optgroup>
</select>

<select>
  <option value="free">Free Plan</option>
  <option value="pro" disabled>Pro Plan (coming soon)</option>
</select>

Attributes

• value (string): The value submitted with the form when this option is selected
• selected (boolean): Marks this option as selected by default
• disabled (boolean): Prevents this specific option from being selected
• label (string): Used on optgroup to set the group's visible heading

Best practices

• Always set a meaningful value attribute — without one, the option's text content is submitted instead, which is easy to forget
• Use optgroup to organize dropdowns with more than roughly 8-10 options into logical categories
• Use the disabled attribute on options that are not currently available rather than removing them entirely
• Keep option text short enough to display fully in the dropdown without truncation

Browser compatibility

Related HTML documentation

Specifications & further reading

• HTML Living Standard