Struct Optgroup 

pub struct Optgroup;

The <optgroup> element - groups related options within a <select> element.

Purpose

The <optgroup> element groups related <option> elements within a <select> element. Provides semantic grouping and visual separation of options, making long select lists more organized and easier to navigate. Option groups are typically displayed with indented options and a bold group label.

Content Categories

• None (only valid within <select>)

Permitted Content Model

• Zero or more <option> elements

Common Use Cases

• Organizing countries by region
• Grouping products by category
• Categorizing options by type or brand
• Structuring hierarchical selections
• Improving navigation in long dropdown lists

Key Attributes

• label: Name of the group (required)
• disabled: Disables all options in the group

Example

<!-- Countries grouped by region -->
<label for="country">Select country:</label>
<select id="country" name="country">
  <optgroup label="North America">
    <option value="us">United States</option>
    <option value="ca">Canada</option>
    <option value="mx">Mexico</option>
  </optgroup>
  <optgroup label="Europe">
    <option value="uk">United Kingdom</option>
    <option value="de">Germany</option>
    <option value="fr">France</option>
  </optgroup>
  <optgroup label="Asia">
    <option value="jp">Japan</option>
    <option value="cn">China</option>
    <option value="in">India</option>
  </optgroup>
</select>

<!-- Products by category -->
<label for="product">Choose product:</label>
<select id="product" name="product">
  <optgroup label="Electronics">
    <option value="laptop">Laptop</option>
    <option value="phone">Smartphone</option>
  </optgroup>
  <optgroup label="Clothing">
    <option value="shirt">T-Shirt</option>
    <option value="jeans">Jeans</option>
  </optgroup>
</select>

<!-- Disabled option group -->
<label for="service">Service level:</label>
<select id="service" name="service">
  <optgroup label="Available">
    <option value="basic">Basic</option>
    <option value="standard">Standard</option>
  </optgroup>
  <optgroup label="Premium Options" disabled>
    <option value="premium">Premium</option>
    <option value="enterprise">Enterprise</option>
  </optgroup>
</select>

<!-- Time zones grouped -->
<label for="timezone">Time zone:</label>
<select id="timezone" name="timezone">
  <optgroup label="US Time Zones">
    <option value="est">Eastern</option>
    <option value="cst">Central</option>
    <option value="pst">Pacific</option>
  </optgroup>
  <optgroup label="European Time Zones">
    <option value="gmt">GMT</option>
    <option value="cet">CET</option>
  </optgroup>
</select>

Accessibility

• Group labels are announced by screen readers
• Helps users understand option organization
• Makes navigation easier in long lists
• Ensure group labels are descriptive

WHATWG Specification

• 4.10.9 The optgroup element

Trait Implementations

impl HtmlElement for Optgroup

const TAG: &'static str = "optgroup"

The HTML tag name (e.g., “div”, “span”, “img”).

const VOID: bool = false

Whether this is a void element (self-closing, no children allowed).

impl CanContain<Optgroup> for Select

impl CanContain<Option_> for Optgroup

impl CanContain<Script> for Optgroup

impl CanContain<Template> for Optgroup