Missouri State University Pattern Library

Dropdown: Standard

No notes defined.

<div class="ou-form">
    <div id="div_lorem_ipsum_dolor" class="form-group">
        <label class="control-label" for="id_lorem_ipsum_dolor">Lorem ipsum dolor sit amet consectetur
        </label> <select id="id_lorem_ipsum_dolor" name="lorem_ipsum_dolor" class="form-control" aria-describedby="description">
            <option value="" selected>Please select</option>
            <option value="Option number one">Option number one</option>
            <option value="Option number two">Option number two</option>
        </select>
        <span id="ldp-help-lorem_ipsum_dolor" class="help-block">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis deserunt ullam temporibus sunt! Quo libero aut atque beatae, distinctio quasi.</span>
    </div>

</div>
 
{{#> @mc-control-wrapper}}
  {{#*inline 'container'}}
    <div id="div_{{name}}" class="form-group">
      {{> @mc-label}}
        <select id="id_{{name}}" name="{{name}}" class="form-control" {{#if required}} required aria-required="true"{{/if}}{{#if description}}aria-describedby="description"{{/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>
      {{> @mc-description}}
    </div>    
  {{/inline}}
{{/@mc-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": "Please select",
          "selected": true,
          "value": null
        },
        {
          "option": "Option number one",
          "value": "Option number one"
        },
        {
          "option": "Option number two",
          "value": "Option number two"
        }
      ]
    }
  ]
}