# Using `optgroup` to group `option` elements inside a `select`

ID: H85

Technology: html

Type: Technique

## When to Use

HTML pages that collect user input.

## Description

The objective of this technique is to group items in a selection list. A selection list is a set of allowed values for a form control such as a multi-select list or a combo box. Often, selection lists have groups of related options. Those groups should be semantically identified, rather than being delimited with "dummy" list entries, for example: an `option` element containing only a series of dashes to create a horizontal line. Semantically identifying groups of options helps to visually break up long lists so that users can more easily locate what they are interested in.

In HTML, the `select` element is used to create both multi-select lists and combo boxes. The various allowed options are each indicated with `option` elements. To group options together, use the `optgroup` element, with the related `option` elements inside that element. Label the group with the `label` attribute so users will know what to expect inside the group.

The `optgroup` element should be directly inside the `select` element, and the `option` elements directly inside the `optgroup`. It is possible for a `select` element to contain both single `option` elements and `optgroup` groups, though authors should consider if this is in fact the desired intent when using this. It is not possible to nest the `optgroup` element, so only one level of grouping can be done within a `select`.

If grouping information is essential to understanding the list, authors may define `option` labels that can be understood even when the screen reader does not present the grouping information provided by `optgroup`.

## Examples

The following combo box collects data about favorite foods. Grouping by type allows users to select their preference more quickly.

    <form action="/favorite-food/" method="post">
      <label for="food">What is your favorite food?</label>
      <select id="food" name="food">
        <optgroup label="Fruits">
          <option value="1">Apples</option>
          <option value="2">Bananas</option>
          <option value="3">Peaches</option>
        </optgroup>
        <optgroup label="Vegetables">
          <option value="4">Broccoli</option>
          <option value="5">Carrots</option>
          <option value="6">Cucumbers</option>
        </optgroup>
        <optgroup label="Baked Goods">
          <option value="7">Apple Pie</option>
          <option value="8">Bagels</option>
          <option value="9">Chocolate Cake</option>
        </optgroup>
       </select>
    </form>

The following example shows how a multi-select box can make use of the `optgroup` element.

    <form action="/animals/" method="post">
      <label for="animals">Pick your favorite animals:</label>
      <select id="animals" multiple name="animals" size="10">
        <optgroup label="Dinosaurs">
          <option value="brontosaurus">Brontosaurus</option>
          <option value="pterodactyl">Pterodactyl</option>
          <option value="trex">Tyrannosaurus Rex</option>
          <option value="velociraptor">Velociraptor</option>
        </optgroup>
        <optgroup label="Ungulates">
          <option value="camel">Camel</option>
          <option value="giraffe">Giraffe</option>
          <option value="hippo">Hippo</option>
          <option value="horse">Horse</option>
          <option value="zebra">Zebra</option>
        </optgroup>
        <optgroup label="Household Pets">
          <option value="cat">Cat</option>
          <option value="dog">Dog</option>
          <option value="fish">Fish</option>
          <option value="rabbit">Rabbit</option>
        </optgroup>
      </select>
    </form>

## Tests

### Procedure

1. Check the set of options within a selection list to see if there are groups of related options.
2. If there are groups of related options, they should be grouped with `optgroup`.

### Expected Results

- Check #2 is true.

## Resources

- HTML - `select` element.
- HTML - `optgroup` element.
- HTML - `option` element.
- WebAIM - Creating Accessible Forms.