optgroup element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Table of contents

Description

The optgroup element represents a thematically defined group of options (option), that blongs to a select control. The grouped options can be labeled through the label attribute, that browsers will use to display as name of the group.

Grouping options in a select control may improve readability and ease of use. Authors should use this element whenever possible.

The label attribute is required in this element and should provide users with a hint or description about the contents of the group.

Examples

In this example we'll create a select control with some option elements divided in two groups. Here you'll have a chance to see groups representation and their interaction mode. You'll also be able to note the presence of the required attribute label and how your browser uses it to identify the group.

<p>
  Pick a car:
  <select>
    <optgroup label="Ferrari">
      <option>458 Spider</option>
      <option>F12 Berlinetta</option>
      <option>California T</option>
    </optgroup>
    <optgroup label="Porsche">
      <option>Macan</option>
      <option>918 Spyder</option>
    </optgroup>
  </select>
</p>

Pick a car:

Now, we'll use the disabled attribute to disable a complete group of options at once. This will ban the user from interaction with all options in the disabled group.

<p>
  Choose a figurine:
  <select>
    <optgroup label="Africa">
      <option>Elephant</option>
      <option>Jiraffe</option>
      <option>Zebra</option>
      <option>Lion</option>
    </optgroup>
    <optgroup label="Oceania" disabled>
      <option>Tasmanian devil</option>
      <option>Koala</option>
      <option>Kangaroo</option>
    </optgroup>
  </select>
</p>

Choose a figurine:

Attributes

Specific attributes

disabled

A boolean value indicating wether the group and all of its options are disabled or not. If the attribute takes the value "disabled" or the empty string (""), or if it's just present, the group of options will be disabled.

Disabled controls are rendered greyed out (if visible), are blocked from user interaction and, more importantly, their values (if any) aren't sent when the form is submitted.

Example

<p>
  Select a product:
  <select>
    <optgroup label="Fruits" disabled>
      <option>Apple</option>
      <option>Orange</option>
    </optgroup>
    <optgroup label="Vegetables">
      <option>Onion</option>
      <option>Carrot</option>
    </optgroup>
  </select>
</p>

Select a product:

label

A run of text intended to provide a label, name or identification to the group of options. This label will be appropriately displayed by the browser to improove readability in the control.

This attribute is required in this element and should provide the user with a proper identification of the contents of the group.

Example

<p>
  Select a dish:
  <select>
    <optgroup label="Chinese">
      <option>Sweet and sour pork</option>
      <option>Honey walnut shrimp</option>
    </optgroup>
    <optgroup label="Mexican">
      <option>Slow Cooker Enchiladas</option>
      <option>Taco salad</option>
    </optgroup>
  </select>
</p>

Select a dish:

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.