Missouri State University Pattern Library

Dropdown

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."
}