The
<optgroup>tag is used to group related<option>elements inside a<select>drop-down.
It provides better organization and readability for long lists of options.<optgroup>can only be used as a child of<select>.
Syntax
<optgroup label="Group Name" disabled>
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
</optgroup>Attributes
| Attribute | Description |
|---|---|
| label | Specifies the name of the group displayed in the drop-down. |
| disabled | Disables the entire group of options. |
| id | Assigns a unique ID to the optgroup element. |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Optgroup Example</title>
</head>
<body>
<h2>Select a Fruit or Vegetable</h2>
<form action="/samples/form_processor.php" method="post">
<label for="items">Choose an item:</label><br>
<select name="items" id="items" required>
<optgroup label="Fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</optgroup>
<optgroup label="Vegetables">
<option value="carrot">Carrot</option>
<option value="spinach">Spinach</option>
</optgroup>
<optgroup label="Unavailable" disabled>
<option value="tomato">Tomato</option>
</optgroup>
</select><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Output
Browser Output
You will see a drop-down list where options are grouped under headings like “Fruits” and “Vegetables.”
The “Unavailable” group is disabled, so its options cannot be selected.
Try it in our TryIt Editor to explore grouped selections.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
All major browser supports <optgroup> tag
