Missouri State University Pattern Library

Group: Horizontal

There are no notes for this item.

<fieldset class="fieldset Page10">
    <legend>Horizontal radio button 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="radio" id="field-1" name="Field_radio_button_group" value="Pre-selected" class="radio Page1" checked aria-describedby="description-10" />
            <label for="field-1">Pre-selected radio button</label> </li>
        <li>
            <input type="radio" id="field-2" name="Field_radio_button_group" value="Standard one" class="radio Page2" aria-describedby="description-10" />
            <label for="field-2">Standard radio button one</label> </li>
        <li>
            <input type="radio" id="field-3" name="Field_radio_button_group" value="Standard two" class="radio Page3" aria-describedby="description-10" />
            <label for="field-3">Standard radio button two</label> </li>
        <li>
            <input type="radio" id="field-4" name="Field_radio_button_group" value="Disabled" class="radio Page4" disabled aria-describedby="description-10" />
            <label for="field-4">Diabled radio button</label> </li>
        <li>
            <input type="radio" id="field-5" name="Field_radio_button_group" value="Required" class="radio Page5" required aria-required="true" aria-describedby="description-10" />
            <label for="field-5">Required radio button<abbr class="required" title="required">*</abbr></label> </li>
    </ul>

</fieldset>
 
{{#> @fieldset}}
  {{#*inline 'container'}}
    <ul class="unstyled{{#if orientation}} {{orientation}}{{/if}}">
      {{#each control}}
        <li>
          {{> @radio-button-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 radio button",
      "value": "Pre-selected",
      "name": "radio_button_group",
      "checked": true
    },
    {
      "pageId": 2,
      "label": "Standard radio button one",
      "name": "radio_button_group",
      "value": "Standard one"
    },
    {
      "pageId": 3,
      "label": "Standard radio button two",
      "name": "radio_button_group",
      "value": "Standard two"
    },
    {
      "pageId": 4,
      "label": "Diabled radio button",
      "name": "radio_button_group",
      "value": "Disabled",
      "disabled": true
    },
    {
      "pageId": 5,
      "label": "Required radio button",
      "name": "radio_button_group",
      "value": "Required",
      "required": true
    }
  ],
  "legend": "Horizontal radio button group",
  "orientation": "horizontal"
}