optgroup

Groups related options within a select element. Option groups help organize long lists of choices into logical categories.

When to Use

  • Organizing options into logical categories
  • Long select lists with distinct groupings (countries by continent, items by category)
  • Making it easier to scan and find options

Basic Usage

The label attribute provides the group heading displayed in bold.

Code

<select id="category"> <optgroup label="Fruits"> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="orange">Orange</option> </optgroup> <optgroup label="Vegetables"> <option value="carrot">Carrot</option> <option value="broccoli">Broccoli</option> <option value="spinach">Spinach</option> </optgroup> </select>

Attributes

Attribute Purpose Required
label The group heading text Yes
disabled Disables all options in the group No

Countries by Region

A common use case for organizing geographical data.

Products by Category

Organizing product options for e-commerce.

Disabled Option Groups

Disable an entire group when its options should not be selectable.

Express shipping not available for your location

Code

<select> <optgroup label="Available"> <option value="a">Option A</option> </optgroup> <optgroup label="Unavailable" disabled> <option value="b">Option B</option> </optgroup> </select>

Multiple Option Groups

Use multiple groups for complex categorization.

With Multiple Select

Option groups work well with multiple select for multi-category selection.

Hold Ctrl/Cmd to select multiple

Accessibility Notes

  • Screen reader support: Option groups are announced as categories
  • Keyboard navigation: Arrow keys move through options, groups act as visual separators
  • Use meaningful labels: The label attribute should clearly describe the group
  • Don't nest optgroups: Nesting is not supported in HTML
  • Disabled groups: All options within a disabled group are unselectable

CSS Reference

optgroup { font-weight: 600; } /* Note: optgroup styling is limited and varies by browser. Most browsers display the label in bold by default. */

Limitations

  • No nesting: Cannot nest optgroups within optgroups
  • Limited styling: Browser-dependent appearance with limited CSS control
  • Label is required: The label attribute must be provided
  • Options only: Can only contain option elements

Related Elements

  • select - Parent element containing optgroups
  • option - Individual options within groups
  • datalist - Alternative for autocomplete (no optgroups)