HTML <optgroup>: Group Related Options in a Select List
The HTML <optgroup> element groups related <option> items inside a <select>. It is useful when a dropdown has several categories and users need clear group headings.
<label for="material">Choose a resource:</label>
<select id="material" name="material">
<optgroup label="Books">
<option value="b1">Book 1</option>
<option value="b2">Book 2</option>
</optgroup>
<optgroup label="Articles">
<option value="a1">Article 1</option>
</optgroup>
</select>The group label is shown as a heading within the dropdown. The value submitted with the form still comes from the selected <option>, not from the <optgroup>.
Grouping Options with <optgroup> Top ↑
This example preserves the original Books, Publications and Articles grouping:
The group headings organize the choices but are not themselves selectable options.
<select id="material" name="material">
<optgroup label="Books">
<option value="b1">Book 1</option>
<option value="b2">Book 2</option>
</optgroup>
<optgroup label="Publications">
<option value="pb1">Publication 1</option>
</optgroup>
</select>Attributes of <optgroup> Top ↑
label Top ↑
The label gives the group its visible name. For the normal, widely supported form of <optgroup>, supply a concise label that describes the options in that group.
disabled Top ↑
The Boolean disabled attribute disables the choices in that group. The <select> itself remains usable unless the select is also disabled.
Disable a Complete Option Group Top ↑
The Publications group is visible but its options cannot be selected through the normal control.
<optgroup label="Publications" disabled>
<option value="pb1">Publication 1</option>
<option value="pb2">Publication 2</option>
</optgroup>disabled is a user-interface restriction, not a security rule. A server receiving the form should still validate the submitted value against the values allowed for that user and request.Form Submission and Validation Top ↑
The <select> needs a name for its selected value to be included in normal form submission. The selected option's value is sent using that name.
<label for="course">Choose a course:</label>
<select id="course" name="course" required>
<option value="">Choose one</option>
<optgroup label="Web">
<option value="html">HTML</option>
<option value="javascript">JavaScript</option>
</optgroup>
</select>For example, choosing HTML sends a value such as course=html. Do not trust that value merely because it came from a dropdown; users can alter requests outside the normal UI.
Accessibility and Usability Top ↑
- Give the
<select>an explicit<label>. - Use meaningful, concise group labels such as “Books” or “Articles”.
- Do not use
<optgroup>only for visual indentation; the group should represent a real relationship among options. - Do not nest one
<optgroup>inside another. - For a very large or searchable dataset, a native select may stop being the best user interface; choose a different control only when the interaction genuinely requires it.
Managing OPTGROUP Attributes Dynamically Top ↑
The existing Plus2net demo shows changing an optgroup's disabled state from another control using jQuery.
Demo: manage OPTGROUP disabled state
Related application tutorials already available on Plus2net:
jQuery radio-button click event can be used to drive this type of interface. For server-side handling of a multi-select list, see multiple selection options handled using PHP. For additional client-side listbox examples, see Managing Listbox using jQuery.
Common <optgroup> Mistakes Top ↑
Forgetting the select label Top ↑
The optgroup labels organize the choices, but they do not replace the label that identifies the purpose of the complete <select>.
Nesting optgroups Top ↑
<optgroup> groups cannot be nested. If the information needs more hierarchy, reconsider the control or simplify the categories.
Assuming a disabled group is a security boundary Top ↑
Client-side restrictions do not replace server-side authorization and value validation.
Forgetting the option value Top ↑
Choose stable, meaningful submitted values rather than depending on display text when the application needs a specific identifier.
Related Tutorials Top ↑
Frequently Asked Questions Top ↑
It groups related option elements inside a select and gives the group a label in the dropdown interface.
No. The group heading organizes its options; the user selects an option inside the group.
It makes the options in that group unavailable for normal selection while leaving other groups in the select usable.
No. Optgroup elements should not be nested inside other optgroup elements.
No. The select's name and the selected option's value form the submitted name-value pair.
No. Submitted values should still be validated and authorized on the server because client-side controls can be bypassed or altered.
Dropdown Listbox in Form Checkbox in a Form Managing Font Size and Style
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
