Description

The HTML element <optgroup> is used to define a group of options within a dropdown list of the <select> element, where each option is defined using the <option> element.

It cannot be nested and it must be defined within the context of the <select> element.

Grouping of related options is particularly helpful when a user has to choose from a long list of options, as the groups make it easy to access and grasp.

The below table summarizes its usage.

Usage Details
Placement Parent element is <select>.
Contents It can contain one or more <option> elements.
Tags Both the opening and closing tags are required.
Versions HTML 4, 4.01, 5

Syntax

Here is the basic syntax of the <optgroup> element.

<optgroup label="text">...</optgroup>

Examples

Run this on IDE

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example - HTML Element optgroup</title>
</head>
<body>
    <form>
        <select>
            <optgroup label="Vegetables">
                <option value="potato">Potato</option>
                <option value="tomato">Tomato</option>
            </optgroup>
            <optgroup label="Fruits">
                <option value="apple">Apple</option>
                <option value="banana">Banana</option>
            </optgroup>
        </select>
    </form>
</body>
</html>

Attributes

The following table shows the list of supported and unsupported attributes for the <optgroup> element.

Attribute Type Details
Element-Specific Attributes The tag <optgroup> has some element-specific attributes listed in the below table.
Global Attributes Like all other HTML tags, the tag <optgroup> supports the HTML Global Attributes.
Event Attributes The tag <optgroup> also supports the HTML Event Attributes.

Here is a list of attributes that are specific to the <optgroup> element.

Attribute Value Required Description
label text Yes Specifies the label for a group of options.
disabled disabled No Boolean attribute that indicates whether the enclosed set of options is disabled or not.
If the group is disabled, then none of the items in the option group is selectable.

Browser Compatibility

The tag <optgroup> is supported in all modern browsers.

  • Google Chrome 1+
  • Internet Explorer or Edge 6+
  • Firefox 1+
  • Apple Safari 1+
  • Opera 7+

Related Links