<optgroup>

<optgroup> tag

The <optgroup> tag in HTML is used to group related options within a <select> element. It helps categorize and organize the options, making it easier for users to navigate large lists of choices.

Syntax

<select>
  <optgroup label="Group Name">
    <option value="value1">Option 1</option>
    <option value="value2">Option 2</option>
  </optgroup>
</select>

<optgroup> Demo

<h1>The optgroup element</h1>

<p>The optgroup tag is used to group related options in a drop-down list:</p>

<form>
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars">
    <optgroup label="Swedish Cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </optgroup>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Attributes

disabled

When this Boolean attribute is set, none of the items in the option group can be selected, typically graying out the control and preventing interactions like mouse clicks or focus.

label

The label attribute specifies the name of the option group for user interface labeling and is required when using the <optgroup> element.

See also

• Other form-related elements:

<form> <legend> <label> <button> <select> <datalist> <option> <fieldset> <textarea> <input> <output> <progress> <meter>.

Conclusion

The <optgroup> tag is essential for organizing related options within a <select> dropdown, improving navigation and usability, especially in long lists. It allows for clear categorization of options through the label attribute. The disabled attribute can also prevent users from selecting options within specific groups. Overall, <optgroup> enhances both accessibility and user experience by structuring choices logically.