HTML <optgroup> Tag

Description:

The <optgroup> tag is used for grouping related options within your select list. This makes it easier for users to comprehend their choices when looking at a large list.

 

Specific Attributes:

Attribute Definition
label Specifies a label for the option group.

Other Attributes:

Attribute Definition
dir

Specifies the text direction for the content in an element.
Possible Values:

  • rtl  (Right to Left)
  • ltr  (Left to Right)
class Specifies a classname for an element.
id Specifies a unique id for an element.
lang Specifies a language code for the content in an element.
title Specifies a title to associate with the element. Many browsers will display this when the cursor hovers over the element (similar to a "tool tip").
style Specifies an inline style for an element.
disabled Disables the input control. The button won't accept changes from the user. It also cannot receive focus and will be skipped when tabbing.

Example Code:

<select>
  <optgroup label="Fruits">
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
    <option value="apple">Apple</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="carrot">Carrot</option>
    <option value="tomato">Tomato</option>
    <option value="onion">Onion</option>
  </optgroup>
</select>

Result