optgroup

Groups related options within a select element under a visible label. Helps users scan long option lists organized into logical categories.

When to Use

  • Organizing options into logical categories (countries by continent, products by type)
  • Long select lists with distinct groupings
  • Making it easier to scan and locate options in a large list

Examples

The shared select demo below includes an optgroup example showing countries grouped by region.

Basic Usage

The required label attribute provides the group heading displayed in bold above the options.

Attributes

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

Disabled Optgroup

Disabling an optgroup makes every option within it unselectable. This is useful for showing choices that exist but are not currently available.

Limitations

  • No nesting: You cannot nest an optgroup inside another optgroup. HTML does not support it
  • Limited styling: Browser and OS rendering controls most of the appearance. VB sets font-weight: 600 on the group label but cannot change backgrounds, colors, or add icons
  • Options only: An optgroup can only contain option elements
  • Label is required: The label attribute must be provided; there is no fallback text
  • Not in datalist: Optgroups are not supported inside datalist

For fully custom grouped dropdowns with arbitrary styling, consider the combo-box web component.

Accessibility

  • Screen reader support: Groups are announced as categories, helping users understand the structure
  • Keyboard navigation: Arrow keys move through all options across groups; groups act as visual separators
  • Meaningful labels: The label attribute should clearly describe what the group contains
  • Disabled groups: All options within a disabled group are announced as unavailable

CSS Reference

Related

  • select - Parent element containing optgroups
  • option - Individual choices within groups
  • combo-box - Fully custom filterable dropdown with arbitrary group styling