<select name="car">
  <optgroup label="German">
    <option value="bmw">BMW</option>
  </optgroup>
  <optgroup label="Japanese">
    <option value="toyota">Toyota</option>
  </optgroup>
</select>

Deep Dive Course

**`<optgroup>`** organizes a long list of `<option>`s into labeled clusters within a `<select>`, using its **`label`** attribute for the group heading (the label itself isn't selectable — it's just a visual/structural divider). This is especially useful for dropdowns with many choices that naturally fall into categories, like car makes grouped by country, or products grouped by category.

1Understanding <optgroup>

`<optgroup>` organizes a long list of <option>s into labeled clusters within a <select>, using its `label` attribute for the group heading (the label itself isn't selectable — it's just a visual/structural divider). This is especially useful for dropdowns with many choices that naturally fall into categories, like car makes grouped by country, or products grouped by category.

💡

The optgroup's label is purely a heading — it can't be selected as a value itself, so don't rely on it to represent a real 'category' choice; if users need to pick a category too, that requires its own separate control.

editor.html

<select name="fruit">
  <optgroup label="Citrus">
    <option value="orange">Orange</option>
    <option value="lemon">Lemon</option>
  </optgroup>
  <optgroup label="Berries">
    <option value="strawberry">Strawberry</option>
  </optgroup>
</select>

localhost:3000

2Practical Example

Here is a real-world application of <optgroup> showing how it is used in production HTML.

editor.html

<!-- A disabled optgroup disables every option inside it -->
<optgroup label="Out of Stock" disabled>
  <option value="x1">Item X1</option>
</optgroup>

localhost:3000

3Best Practices

Follow these guidelines when working with <optgroup>:

1. Use <optgroup> to organize long dropdowns into clear, labeled categories

2. Keep the label attribute short and purely descriptive of the group below it

3. Don't nest <optgroup> inside another <optgroup> — nesting isn't supported

⚠️

Tip: The optgroup's label is purely a heading — it can't be selected as a value itself, so don't rely on it to represent a real 'category' choice; if users need to pick a category too, that requires its own separate control.

editor.html

<select name="fruit">
  <optgroup label="Citrus">
    <option value="orange">Orange</option>
    <option value="lemon">Lemon</option>
  </optgroup>
  <optgroup label="Berries">
    <option value="strawberry">Strawberry</option>
  </optgroup>
</select>

localhost:3000

Examples

Example 01Basic Usage

<select name="fruit">
  <optgroup label="Citrus">
    <option value="orange">Orange</option>
    <option value="lemon">Lemon</option>
  </optgroup>
  <optgroup label="Berries">
    <option value="strawberry">Strawberry</option>
  </optgroup>
</select>

Example 02Advanced Example

<!-- A disabled optgroup disables every option inside it -->
<optgroup label="Out of Stock" disabled>
  <option value="x1">Item X1</option>
</optgroup>

Best Practices

Use to organize long dropdowns into clear, labeled categories
Keep the label attribute short and purely descriptive of the group below it
Don't nest inside another — nesting isn't supported

Interview Question

Can you select the label text of an <optgroup> as a value in the form submission?▼

Hint: Think about what an <optgroup> actually represents structurally.

No — an <optgroup>'s label is purely a visual/structural heading for the options nested inside it; it isn't itself a selectable <option> and has no value that could be submitted. If you need the category itself to be a selectable choice (e.g. 'any German car'), you'd need to add a separate, real <option> for that alongside the grouped ones, rather than relying on the optgroup label.

Exercises

EasyPractice using <optgroup> in a real scenario.

View Solution

<select name="fruit">
  <optgroup label="Citrus">
    <option value="orange">Orange</option>
    <option value="lemon">Lemon</option>
  </optgroup>
  <optgroup label="Berries">
    <option value="strawberry">Strawberry</option>
  </optgroup>
</select>

Frequently Asked Questions

Can you select the label text of an <optgroup> as a value in the form submission?▼

No — an 's label is purely a visual/structural heading for the options nested inside it; it isn't itself a selectable

Related Functions

select-tagoption-tag