Optgroups

Optgroups are a feature of HTML select inputs used to organize a long list of options into labeled categories. They help users navigate complex option lists by providing a clear, logical structure within a dropdown.

The optgroup element is placed inside a select and contains one or more option elements. The label attribute supplies the visible heading for the group, and a disabled attribute can disable all options within that group. A simple structure looks like: <select> <optgroup label="Europe"> <option value="FR">France</option> <option value="DE">Germany</option> </optgroup> </select>.

Accessibility considerations support the use of optgroups. Screen readers announce the group label, helping users understand the organization of options. Using semantic optgroups is preferable to visual only dividers because it communicates structure to assistive technologies.

Styling and behavior considerations include limited customization of optgroup labels, which can render differently across browsers. Optgroups cannot be nested; you can only have a single level of grouping. Each option within a group must have its own value. If a group is disabled, its contained options become unavailable to selection.

Use cases for optgroups include organizing large lists such as selecting countries by region, categorizing product options, or grouping settings by feature area. For very large or dynamic datasets, developers may complement native optgroups with searchable or custom select widgets to enhance usability while preserving accessible structure.

In summary, optgroups provide a native, accessible way to categorize options within a select element, improving navigation and usability for complex option lists.