Missouri State University Pattern Library

Dropdown: Option groups

There are no notes for this item.

<div class="form-control Page1">
    <label for="field-1">Lorem ipsum dolor sit amet consectetur</label>
    <div class="description" id="description-1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis deserunt ullam temporibus sunt! Quo libero aut atque beatae, distinctio quasi.</div>
    <select name="Field_lorem_ipsum_dolor" id="field-1" aria-describedby="description-1">
            <option value="none" selected>--Select an option--</option>
            <optgroup label="Group one">
            <option value="Option number one">Option number one</option>
            <option value="Option number two">Option number two</option>
            <option value="Disabled" disabled>Disabled option</option>
            </optgroup>
            <optgroup label="Group two">
            <option value="Option number one">Option number one</option>
            <option value="Option number two">Option number two</option>
            <option value="Disabled" disabled>Disabled option</option>
            </optgroup>
        </select>

</div>
 
{{#> @control-wrapper}}
    {{#*inline 'container'}}
        {{> @label}}
        {{> @description}}

        <select name="Field_{{name}}" id="field-{{pageId}}" {{#if required}} required aria-required="true"{{/if}}{{#if description}}aria-describedby="description-{{pageId}}"{{/if}}>
        {{#> control}}
        {{#each group}}
            {{#if label}}
            <optgroup label="{{label}}">
            {{/if}}
            {{#each control}}
            <option value="{{value}}"{{#if selected}} selected{{/if}}{{#if disabled}} disabled{{/if}}>{{option}}</option>
            {{/each}}
            {{#if label}}
            </optgroup>
            {{/if}}
        {{/each}}
        {{/control}}
        </select>
    {{/inline}}
{{/@control-wrapper}}
 
{
  "pageId": 1,
  "label": "Lorem ipsum dolor sit amet consectetur",
  "name": "lorem_ipsum_dolor",
  "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis deserunt ullam temporibus sunt! Quo libero aut atque beatae, distinctio quasi.",
  "group": [
    {
      "control": [
        {
          "option": "--Select an option--",
          "selected": true,
          "value": "none"
        }
      ]
    },
    {
      "label": "Group one",
      "control": [
        {
          "option": "Option number one",
          "value": "Option number one"
        },
        {
          "option": "Option number two",
          "value": "Option number two"
        },
        {
          "option": "Disabled option",
          "value": "Disabled",
          "disabled": true
        }
      ]
    },
    {
      "label": "Group two",
      "control": [
        {
          "option": "Option number one",
          "value": "Option number one"
        },
        {
          "option": "Option number two",
          "value": "Option number two"
        },
        {
          "option": "Disabled option",
          "value": "Disabled",
          "disabled": true
        }
      ]
    }
  ]
}