HTML <optgroup> Tag

The <optgroup> tag groups dropdown options in a <select> element. This tag displays a unselectable title above the items in the group.

HTML Tag

Example

#

Two <optgroup> tags in a dropdown element.
One is for cities in Europe and the other for cities in Asia.

<select>
  <option value="">-- Select city -- </option>
  <optgroup label="Europe">
    <option value="stockholm">Stockholm</option>
    <option value="barcelona">Barcelona</option>
    <option value="athens">Athens</option>
  </optgroup>
  <optgroup label="Asia">
    <option value="bangkok">Bangkok</option>
    <option value="manila">Manila</option>
    <option value="jakarta">Jakarta</option>
  </optgroup>
</select>
optgroup = options group

Using <optgroup>

The <optgroup> tag groups related <option> elements inside a <select> element.

It also display a title above the items in the group. The title is non-selectable.

This element is useful when dropdown options fall into different categories.

More Examples

A <select> control with two <optgroup> elements: Europe and Asia.
All European cities are disabled by disabling the European optgroup.

<select>
  <option value="">-- Select city -- </option>
  <optgroup label="Europe" disabled>
    <option value="stockholm">Stockholm</option>
    <option value="barcelona">Barcelona</option>
    <option value="athens">Athens</option>
  </optgroup>
  <optgroup label="Asia">
    <option value="bangkok">Bangkok</option>
    <option value="manila">Manila</option>
    <option value="jakarta">Jakarta</option>
  </optgroup>
</select>

Attributes for <optgroup>

This table lists the <optgroup> tag attributes.

Attribute Value Description
label text Option group label.
id    identifier Defines a unique identifier for the optgroup.
class    classnames Sets one or more CSS classes to be applied to the optgroup.
style    CSS-styles Sets the style for the optgroup.
data-*    value Defines additional data that can be used by JavaScript.
hidden    hidden Specifies whether the optgroup is hidden.
disabled disabled Specifies whether the optgroup is disabled.

For additional global attributes see our global attributes list.


Browser support

Here is when <optgroup> support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

Guides