Missouri State University Pattern Library

Group

No notes defined.

<div class="ou-form">
    <div class="ou-ldp-form-element">
        <div id="div_checkbox-mc-group" class="form-group">
            <fieldset id=id_checkbox-mc-group class="input group">
                <legend class="control-label">Checkbox group<span class="required" title="required">*</span></legend>
                <div class="ou-form">
                    <div class="checkbox">
                        <form class="form">
                            <label>
                                <input type="checkbox" name="checkbox-mc-group" title="Standard checkbox one" value="Standard checkbox one">Standard checkbox one
                            </label>
                        </form>
                    </div>

                </div>
                <div class="ou-form">
                    <div class="checkbox">
                        <form class="form">
                            <label>
                                <input type="checkbox" name="checkbox-mc-group" title="Standard checkbox two" value="Standard checkbox two">Standard checkbox two
                            </label>
                        </form>
                    </div>

                </div>
                <div class="ou-form">
                    <div class="checkbox">
                        <form class="form">
                            <label>
                                <input type="checkbox" name="checkbox-mc-group" title="Standard checkbox three" value="Standard checkbox three">Standard checkbox three
                            </label>
                        </form>
                    </div>

                </div>
                <div class="ou-form">
                    <div class="checkbox">
                        <form class="form">
                            <label>
                                <input type="checkbox" name="checkbox-mc-group" title="Required checkbox" value="Required checkbox">Required checkbox
                            </label>
                        </form>
                    </div>

                </div> <span id="ldp-help-checkbox-mc-group" class="help-block">A brief set of instructions on how to fill out the form control</span>

            </fieldset>
        </div>
    </div>

</div>
 
{{#> @mc-control-wrapper}}
  {{#*inline 'container'}}
    <div class="ou-ldp-form-element">
      <div id="div_{{name}}" class="form-group">    
        {{#> @mc-fieldset}}            
          {{#*inline 'container'}}            
            {{#each control}}              
              {{> @checkbox-mc-single}}            
            {{/each}}            
            {{#if description}}{{> @mc-description}}{{/if}}        
          {{/inline}}
        {{/ @mc-fieldset}}  
      </div>
    </div>
  {{/inline}}  
{{/@mc-control-wrapper}}
 
{
  "required": true,
  "label": "Checkbox Group",
  "name": "checkbox-mc-group",
  "legend": "Checkbox group",
  "description": "A brief set of instructions on how to fill out the form control",
  "control": [
    {
      "pageId": 1,
      "title": "Standard checkbox one",
      "label": "Standard checkbox one",
      "name": "checkbox-mc-group",
      "value": "Pre-selected",
      "checked": true
    },
    {
      "pageId": 2,
      "title": "Standard checkbox two",
      "label": "Standard checkbox two",
      "name": "checkbox-mc-group",
      "value": "Standard two"
    },
    {
      "pageId": 3,
      "title": "Standard checkbox three",
      "label": "Standard checkbox three",
      "name": "checkbox-mc-group",
      "value": "Standard three"
    },
    {
      "pageId": 4,
      "title": "Required checkbox",
      "label": "Required checkbox",
      "name": "checkbox-mc-group",
      "value": "Required",
      "required": true
    }
  ]
}