W3docs
en
Log in

HTML <optgroup> Tag

HTML <optgroup> tag groups elements in а drop-down list <select>, defined by the <option> tag. See examples.

The HTML <optgroup> tag groups related <option> elements together inside a <select> drop-down list. The required label attribute defines the group heading, which the browser displays in bold, while the options inside are automatically indented beneath it.

Why and when to use <optgroup>

A <select> element with a long, flat list of options is hard to scan. Grouping the options under meaningful headings helps the user find the right choice faster. Reach for <optgroup> when:

  • Your drop-down has many options that fall into natural categories (countries by continent, products by type, fonts by family).
  • You want a visual heading inside the list without making it a selectable value — a group label is never selectable.
  • You want to disable a whole batch of options at once with a single disabled attribute.

The <optgroup> tag is a form-associated element, so it only makes sense inside a <select> that lives in a <form>.

Syntax

The <optgroup> tag comes in pairs: the <option> elements it groups are written between the opening (<optgroup>) and closing (</optgroup>) tags.

Example of the HTML <optgroup> tag:

Example of a drop-down list

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <select>
      <optgroup label="Books">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
      </optgroup>
      <optgroup label="Snippets">
        <option value="java">Java</option>
        <option value="linux">Linux</option>
        <option value="git">Git</option>
      </optgroup>
    </select>
  </body>
</html>
Try it Yourself »

Result

The browser will render a drop-down list with two groups:

  • Books: HTML, CSS
  • Snippets: Java, Linux, Git

Example of the HTML <optgroup> tag with the disabled attribute:

Example of the HTML <optgroup> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <select>
      <optgroup disabled label="Quizzes">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
      </optgroup>
      <optgroup label="Snippets">
        <option value="git">Git</option>
        <option value="angularjs">AngularJS</option>
      </optgroup>
    </select>
  </body>
</html>
Try it Yourself »

Result

The browser will render a drop-down list with two groups:

  • Quizzes (disabled): HTML, CSS, JavaScript, PHP — these options appear greyed out and cannot be selected.
  • Snippets: Git, AngularJS

When a group is disabled, none of the options inside it can be selected; the whole batch is turned off in one place, which is why disabling the group is more convenient than adding disabled to each <option> individually.

The disabled attribute

disabled is a boolean attribute. The presence of the attribute means "disabled" — you should write it on its own:

<optgroup disabled label="Quizzes">

The older form disabled="disabled" shown in the example above still works for historical reasons, but the boolean shorthand is the modern, recommended way. There is no disabled="false" — to enable the group you simply omit the attribute.

Using <optgroup> with <select multiple>

Groups work the same way in a multi-select list. The multiple attribute on <select> lets the user pick several options (Ctrl/Cmd-click), and the group headings stay non-selectable:

<select multiple size="8">
  <optgroup label="Front-end">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </optgroup>
  <optgroup label="Back-end">
    <option value="php">PHP</option>
    <option value="node">Node.js</option>
  </optgroup>
</select>

Rules and gotchas

  • label is required. If you omit it, the group renders with an empty heading line and is invalid HTML — the grouping becomes meaningless to both sighted users and assistive technology. Always provide a descriptive label.
  • Accessibility. Screen readers announce the group's label when the user moves into the group, so a clear label (e.g. "Books", "Front-end") gives users essential context about where they are in the list.
  • No nesting. An <optgroup> cannot be placed inside another <optgroup>. The grouping is one level deep only; HTML does not support sub-groups.
  • Inconsistent styling support. Browsers render <optgroup> and <option> using native OS controls, so CSS support is very limited and inconsistent. Chrome, Firefox, and Safari ignore many properties — backgrounds, padding, and fonts often have no effect. The CSS below may work in some browsers and be completely ignored in others, so do not rely on it. If you need fully styled, grouped lists, build a custom widget with JavaScript instead of styling a native <select>.

Attributes

AttributeValueDescription
disableddisabledIndicates that the selection of the group elements is disabled.
labeltextDefines a label for the group, which will be displayed as a heading in the drop-down list. Required attribute.

The <optgroup> tag supports the Global attributes and the Event Attributes.

  • <select> — the drop-down list that contains the groups.
  • <option> — the individual items grouped by <optgroup>.
  • <form> — the form that submits the selected value.

How to style an HTML <optgroup> Tag

As noted in the gotchas above, browser support for styling native form controls is limited and inconsistent. Where it is honored, you can use CSS like this to adjust the group heading and its options, but test in each target browser before relying on it:

optgroup {
  font-weight: bold;
  color: #333;
}
optgroup option {
  font-weight: normal;
  padding-left: 15px;
}

Practice

Practice
What is the function of the HTML 'optgroup' tag?
What is the function of the HTML 'optgroup' tag?
Was this page helpful?