Multi Column Form

Ready

HTML
View
Context
Notes


        
        <form action="#" method="POST" class="form form--multi-col">
    <ul class="u-list-unstyled">
        <li class="form__item form__item--2-col">
            <div class="input__wrapper">
                <label for="sample-1">First Name</label>
                <input type="text" value="" class="" id="sample-1">
            </div>
            <!-- /.input__wrapper -->
        </li>
        <!-- /.form__item -->
        <li class="form__item form__item--2-col">
            <div class="input__wrapper">
                <label for="sample-2">Last Name</label>
                <input type="text" value="" class="" id="sample-2">
            </div>
            <!-- /.input__wrapper -->
        </li>
        <!-- /.form__item -->
        <li class="form__item">
            <div class="input__wrapper">
                <label for="sample-3">Email Address</label>
                <input type="email" value="" class="" id="sample-3">
            </div>
            <!-- /.input__wrapper -->
        </li>
        <!-- /.form__item -->
        <li class="form__item">
            <div class="input__wrapper">
                <label for="sample-4">Address Line 1</label>
                <input type="text" value="" class="" id="sample-4">
            </div>
            <!-- /.input__wrapper -->
        </li>
        <!-- /.form__item -->
        <li class="form__item">
            <div class="input__wrapper">
                <label for="sample-5">Address Line 2</label>
                <input type="text" value="" class="" id="sample-5">
            </div>
            <!-- /.input__wrapper -->
        </li>
        <!-- /.form__item -->
        <li class="form__item form__item--3-col">
            <div class="input__wrapper">
                <label for="sample-6">City</label>
                <input type="text" value="" class="" id="sample-6">
            </div>
            <!-- /.input__wrapper -->
        </li>
        <!-- /.form__item -->
        <li class="form__item form__item--3-col">
            <div class="input__wrapper">
                <label for="sample-7">State</label>
                <select id="sample-7" name="sample-7">
                              <option value="1
                                      disabled="disabled"
                                                        hidden="hidden"
                                                        selected="selected"
                  "
                >
                  Select an Option
                </option>
                              <option value="2
                                                      "
                >
                  First Option
                </option>
                              <option value="3
                                                      "
                >
                  Second Option
                </option>
                              <option value="4
                                                      "
                >
                  Third Option
                </option>
                          </select>
            </div>
            <!-- /.input__wrapper -->
        </li>
        <!-- /.form__item -->
        <li class="form__item form__item--3-col">
            <div class="input__wrapper">
                <label for="sample-8">Zip Code</label>
                <input type="text" value="" class="" id="sample-8">
            </div>
            <!-- /.input__wrapper -->
        </li>
        <!-- /.form__item -->
        <li class="form__item">
            <div class="input__wrapper">
                <label for="sample-9"></label>
                <input type="submit" value="Submit" class="btn" id="sample-9">
            </div>
            <!-- /.input__wrapper -->
        </li>
        <!-- /.form__item -->
    </ul>
</form>
<!-- /.form -->


        {% set layouts = {
  twocol: ' form__item--2-col',
  threecol: ' form__item--3-col',
} %}

<form action="#" method="POST" class="form form--multi-col">
  <ul class="u-list-unstyled">
    {% for input in inputs %}
      <li class="form__item
        {%- if input.layouts -%}
          {%- for layout in input.layouts -%}
            {{- layouts[layout] -}}
          {%- endfor -%}
        {%- endif -%}"
      >
        <div class="input__wrapper">
          <label for="sample-{{ loop.index }}">{{ input.label }}</label>
          {% if input.selectOptions %}
            <select id="sample-{{ loop.index }}" name="sample-{{ loop.index }}">
              {% for item in input.selectOptions %}
                <option value="{{ loop.index }}
                  {% if item.disabled == true %}
                    disabled="disabled"
                  {% endif %}
                  {% if item.hidden == true %}
                    hidden="hidden"
                  {% endif %}
                  {% if item.selected == true %}
                    selected="selected"
                  {% endif %}"
                >
                  {{ item.value }}
                </option>
              {% endfor %}
            </select>
          {% else %}
            <input type="{{ input.type }}" value="{{ input.value }}" class="{{ input.class }}" id="sample-{{ loop.index }}">
          {% endif %}
        </div>
        <!-- /.input__wrapper -->
      </li>
      <!-- /.form__item -->
    {% endfor %}
  </ul>
</form>
<!-- /.form -->


        
            
            {
  "inputs": [
    {
      "label": "First Name",
      "type": "text",
      "layouts": [
        "twocol"
      ]
    },
    {
      "label": "Last Name",
      "type": "text",
      "layouts": [
        "twocol"
      ]
    },
    {
      "label": "Email Address",
      "type": "email"
    },
    {
      "label": "Address Line 1",
      "type": "text"
    },
    {
      "label": "Address Line 2",
      "type": "text"
    },
    {
      "label": "City",
      "type": "text",
      "layouts": [
        "threecol"
      ]
    },
    {
      "label": "State",
      "type": "select",
      "selectOptions": [
        {
          "value": "Select an Option",
          "disabled": true,
          "hidden": true,
          "selected": true
        },
        {
          "value": "First Option"
        },
        {
          "value": "Second Option"
        },
        {
          "value": "Third Option"
        }
      ],
      "layouts": [
        "threecol"
      ]
    },
    {
      "label": "Zip Code",
      "type": "text",
      "layouts": [
        "threecol"
      ]
    },
    {
      "type": "submit",
      "value": "Submit",
      "class": "btn"
    }
  ]
}

Usage

Multi-column forms are a series of form elements that are displayed in a multi-column format. This form includes the following modifier classes to accomdate various layouts:

form__item--2-col should be added to form items to create a two-column layout.
- This class shold be added to 2 consecutive form items to create the layout.
form__item--3-col should be added to form items to create a three-column layout.
- This class shold be added to 3 consecutive form items to create the layout.

Labelling Expectations

All form elements should be associated with a label.

Focus Expectations

All form elements should have a visible keyboard focus state.

Keyboard Expectations

Tab = Move to next focusable form element

Screen Reader Expectations

All visible form elements should be announced by screen readers.

Tab Order Expectations

When navigating through a multi-column, the following tab order is expected:

The next tab keypress will advance to the next form element.