Missouri State University Pattern Library

Group: Horizontal

No notes defined.

<form class="form">
    <fieldset class="fieldset Page10">
        <legend>Horizontal checkbox group</legend>
        <div class="description" id="description-10">A brief set of instructions on how to fill out the form control</div>
        <ul class="unstyled horizontal">
            <li>

                <input type="checkbox" id="field-1" name="Field_checkbox_group" value="Pre-selected" class="checkbox Page1" checked aria-describedby="description-10" />
                <label for="field-1">Pre-selected checkbox</label>
            </li>
            <li>

                <input type="checkbox" id="field-2" name="Field_checkbox_group" value="Standard one" class="checkbox Page2" aria-describedby="description-10" />
                <label for="field-2">Standard checkbox one</label>
            </li>
            <li>

                <input type="checkbox" id="field-3" name="Field_checkbox_group" value="Standard two" class="checkbox Page3" aria-describedby="description-10" />
                <label for="field-3">Standard checkbox two</label>
            </li>
            <li>

                <input type="checkbox" id="field-4" name="Field_checkbox_group" value="Disabled" class="checkbox Page4" disabled aria-describedby="description-10" />
                <label for="field-4">Disabled checkbox</label>
            </li>
            <li>

                <input type="checkbox" id="field-5" name="Field_checkbox_group" value="Required" class="checkbox Page5" required aria-required="true" aria-describedby="description-10" />
                <label for="field-5">Required checkbox<abbr class="required" title="required">*</abbr></label>
            </li>
        </ul>

    </fieldset>

</form>
 
<form class="form">
  {{#> @fieldset}}
    {{#*inline 'container'}}
      <ul class="unstyled{{#if orientation}} {{orientation}}{{/if}}">
        {{#each control}}
          <li>
            {{> @checkbox-single}}
          </li>
        {{/each}}
      </ul>
    {{/inline}}
  {{/ @fieldset}}
</form>
 
{
  "pageId": 10,
  "description": "A brief set of instructions on how to fill out the form control",
  "control": [
    {
      "pageId": 1,
      "label": "Pre-selected checkbox",
      "name": "checkbox_group",
      "value": "Pre-selected",
      "checked": true
    },
    {
      "pageId": 2,
      "label": "Standard checkbox one",
      "name": "checkbox_group",
      "value": "Standard one"
    },
    {
      "pageId": 3,
      "label": "Standard checkbox two",
      "name": "checkbox_group",
      "value": "Standard two"
    },
    {
      "pageId": 4,
      "label": "Disabled checkbox",
      "name": "checkbox_group",
      "value": "Disabled",
      "disabled": true
    },
    {
      "pageId": 5,
      "label": "Required checkbox",
      "name": "checkbox_group",
      "value": "Required",
      "required": true
    }
  ],
  "legend": "Horizontal checkbox group",
  "orientation": "horizontal"
}