optgroup: The Option Group element

The <optgroup> HTML element creates a grouping of options within a <select> element.

Attributes

Specific attributes

Required attributes

label="[group label]" specifies a label for the option group. This label is displayed to users but is not selectable.

Allowed attributes

disabled disables the entire option group, making all contained options non-selectable.

Global attributes

accesskey Specifies a keyboard shortcut to activate or focus an element.

aria-* Defines accessibility properties and states for assistive technologies.

class Specifies one or more CSS class names for styling the element.

data-* Stores custom data private to the page or application.

dir Sets the text direction (left-to-right, right-to-left, or auto).

hidden Hides the element from display and assistive technologies.

id Defines a unique identifier for the element within the document.

inputmode Hints which virtual keyboard type to display on mobile devices.

itemid Provides a global identifier for microdata items.

itemprop Defines a property name-value pair for microdata.

itemref Associates properties with an item via element IDs for microdata.

itemscope Creates a new microdata item container.

itemtype Specifies the vocabulary URL for microdata items (like Schema.org).

lang Specifies the primary language of the element’s content.

nonce Provides a cryptographic nonce for Content Security Policy.

role Defines the element’s semantic role for accessibility.

tabindex Controls keyboard navigation order and focusability.

title Provides advisory information displayed as a tooltip.

Example

<form action="/community-signup" method="post">
  <h2>Join the IndieWeb Community</h2>
  
  <label for="location">Closest Community Hub:</label>
  <select id="location" name="location">
    <optgroup label="North America">
      <option value="sf">San Francisco, CA</option>
      <option value="portland">Portland, OR</option>
      <option value="nyc">New York City, NY</option>
      <option value="austin">Austin, TX</option>
      <option value="toronto">Toronto, ON</option>
    </optgroup>
    
    <optgroup label="Europe">
      <option value="london">London, UK</option>
      <option value="berlin">Berlin, Germany</option>
      <option value="amsterdam">Amsterdam, Netherlands</option>
      <option value="brighton">Brighton, UK</option>
    </optgroup>
    
    <optgroup label="Asia Pacific">
      <option value="tokyo">Tokyo, Japan</option>
      <option value="sydney">Sydney, Australia</option>
      <option value="singapore">Singapore</option>
    </optgroup>
    
    <optgroup label="Virtual" disabled>
      <option value="online-americas">Online - Americas timezone</option>
      <option value="online-europe">Online - Europe timezone</option>
      <option value="online-apac">Online - Asia Pacific timezone</option>
    </optgroup>
  </select>
  
  <label for="hosting-provider">Preferred Hosting:</label>
  <select id="hosting-provider" name="hosting-provider">
    <optgroup label="Static Site Hosting">
      <option value="github-pages">GitHub Pages</option>
      <option value="netlify">Netlify</option>
      <option value="vercel">Vercel</option>
    </optgroup>
    
    <optgroup label="Traditional Web Hosting">
      <option value="shared">Shared Hosting</option>
      <option value="vps">VPS</option>
      <option value="dedicated">Dedicated Server</option>
    </optgroup>
    
    <optgroup label="Self-hosted">
      <option value="home-server">Home Server</option>
      <option value="raspberry-pi">Raspberry Pi</option>
    </optgroup>
  </select>
  
  <button type="submit">Join Community</button>
</form>