Missouri State University Pattern Library

Group: Horizontal

There are no notes for this item.

<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>
 
{{#> @fieldset}}
    {{#*inline 'container'}}
        <ul class="unstyled{{#if orientation}} {{orientation}}{{/if}}">
            {{#each control}}
            <li>
                {{> @checkbox-single}}
            </li>
            {{/each}}
        </ul>
    {{/inline}}
{{/ @fieldset}}
 
{
  "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"
}