In HTML, the **`<optgroup>` element** is used to create a drop-down list. It groups related options in a `<select>` element.

This syntax contains the following attributes:
- **`disabled`**: This is a boolean attribute and specifies if an option-group should be disabled. If it is set, none of the items in this option-group are selectable. This makes browsers unable to receive any focus- related events like mouse clicks.

- **`label`**: This takes `text` as value. It specifies the name of the group of options. This attribute is *mandatory* if this element is used.

 - **`<optgroup>`**: Elements may not be nested.

# 
## Example
The following code demonstrates the usage of the `<optgroup>` element in HTML.
The content that we want to be displayed as option-groups is written within the opening and closing tags `<optgroup>` and `</optgroup>`.

<html>
 <head>
 </head>
 <body>
   <select>
  <optgroup label="Group 1">
    <option>Option 1.1</option>
    <option>Option 1.2</option>
  </optgroup>
  <optgroup label="Group 2">
    <option>Option 2.1</option>
    <option>Option 2.2</option>
  </optgroup>
  <optgroup label="Group 3" disabled>
    <option>Option 3.1</option>
    <option>Option 3.2</option>
  </optgroup>
</select>
 </body>
</html>

codemirror

What is the <optgroup> element in HTML?

Groups related options within a `<select>` element in HTML, with `disabled` and `label` attributes.

What is the <optgroup> element in HTML?

Syntax

Example