🍷 Digital Wine Cellar – Pattern Library

Select: Optgroup 

<label for="select-3">Select with optgroups</label>
<select id="select-3" name="select-3" class="">
    <optgroup label="Group 1">
        <option value="option-0">Option 1-1</option>
        <option value="option-1" selected>Option 1-2</option>
        <option value="option-2">Option 1-3</option>
    </optgroup>
    <optgroup label="Group 2">
        <option value="option-0">Option 2-1</option>
        <option value="option-1">Option 2-2</option>
        <option value="option-2">Option 2-3</option>
    </optgroup>
</select>
 
<label
  for="{{id}}"
  {{#if at-label}} class="at-only"{{/if}}
>{{label}}</label>
<select
  id="{{id}}"
  name="{{id}}"
  {{#if multiple}} multiple{{/if}}
  class="{{modifier}}"
>
  {{#each optgroups}}
    <optgroup label="{{label}}">
      {{#each options}}
        <option value="option-{{@index}}"{{#if selected}} selected{{/if}}>{{option}}</option>
      {{/each}}
    </optgroup>
  {{/each}}
</select>
 
{
  "label": "Select with optgroups",
  "id": "select-3",
  "options": [
    {
      "option": "Option 1"
    },
    {
      "option": "Option 2"
    },
    {
      "option": "Option 3"
    },
    {
      "option": "Option 4"
    },
    {
      "option": "Option 5"
    },
    {
      "option": "Option 6"
    }
  ],
  "optgroups": [
    {
      "label": "Group 1",
      "options": [
        {
          "option": "Option 1-1"
        },
        {
          "option": "Option 1-2",
          "selected": true
        },
        {
          "option": "Option 1-3"
        }
      ]
    },
    {
      "label": "Group 2",
      "options": [
        {
          "option": "Option 2-1"
        },
        {
          "option": "Option 2-2"
        },
        {
          "option": "Option 2-3"
        }
      ]
    }
  ]
}

Select

The HTML <select> element represents a control that provides a menu of options.