How to Create Multi-Column Layouts

By default, form fields are displayed on individual lines. In some cases, it may make more visual sense to put short questions that can fit into a single section into a columned layout (for example, city, state, and ZIP code information).

The @kineticdata/bundle-common library includes code that allow you to set classes used to display sections using a column layout. The classes available depend on which version of the library you are using, as outlined below:

Class	@kineticdata/bundle-common Library Version
`form-group__columns`	v5.0.8
`form-group__columns-3`	v5.0.14
`form-group__columns-4`	v5.0.14

Note: Checkboxes and radio fields use different classes to display in a column format. See How to Style Checkboxes and Radio Buttons for more information.

If you are using an earlier library release or have customized your own bundle, insert the CSS below into the bundle to leverage this functionality. You can edit the CSS to further customize the appearance of the columns if desired.

.form-group__columns, .form-group__columns-3, .form-group__columns-4 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.form-group__columns > *, .form-group__columns-3 > *, .form-group__columns-4 > * {
  flex: 0 0 100%;
}
@media all and (min-width: 576px) {
  .form-group__columns > .form-group, .form-group__columns-3 > .form-group, .form-group__columns-4 > .form-group,
  .form-group__columns > .checkbox[role=group],
  .form-group__columns-3 > .checkbox[role=group],
  .form-group__columns-4 > .checkbox[role=group],
  .form-group__columns > .radio[role=group],
  .form-group__columns-3 > .radio[role=group],
  .form-group__columns-4 > .radio[role=group] {
    flex-basis: calc(50% - 0.75rem);
  }
}
@media all and (min-width: 576px) and (-ms-high-contrast: none) {
  .form-group__columns > .form-group, .form-group__columns-3 > .form-group, .form-group__columns-4 > .form-group,
  .form-group__columns > .checkbox[role=group],
  .form-group__columns-3 > .checkbox[role=group],
  .form-group__columns-4 > .checkbox[role=group],
  .form-group__columns > .radio[role=group],
  .form-group__columns-3 > .radio[role=group],
  .form-group__columns-4 > .radio[role=group] {
    width: calc(50% - 0.75rem);
    flex-basis: auto;
  }
}
.form-group__columns > .full-width.form-group, .form-group__columns-3 > .full-width.form-group, .form-group__columns-4 > .full-width.form-group,
.form-group__columns > .full-width.checkbox[role=group],
.form-group__columns-3 > .full-width.checkbox[role=group],
.form-group__columns-4 > .full-width.checkbox[role=group],
.form-group__columns > .full-width.radio[role=group],
.form-group__columns-3 > .full-width.radio[role=group],
.form-group__columns-4 > .full-width.radio[role=group] {
  flex-basis: 100%;
}
@media all and (-ms-high-contrast: none) {
  .form-group__columns > .full-width.form-group, .form-group__columns-3 > .full-width.form-group, .form-group__columns-4 > .full-width.form-group,
  .form-group__columns > .full-width.checkbox[role=group],
  .form-group__columns-3 > .full-width.checkbox[role=group],
  .form-group__columns-4 > .full-width.checkbox[role=group],
  .form-group__columns > .full-width.radio[role=group],
  .form-group__columns-3 > .full-width.radio[role=group],
  .form-group__columns-4 > .full-width.radio[role=group] {
    width: 100%;
  }
}

@media all and (min-width: 992px) {
  .form-group__columns-3 > .form-group, .form-group__columns-4 > .form-group,
  .form-group__columns-3 > .checkbox[role=group],
  .form-group__columns-4 > .checkbox[role=group],
  .form-group__columns-3 > .radio[role=group],
  .form-group__columns-4 > .radio[role=group] {
    flex-basis: calc(33.33333333% - 1rem);
  }
}
@media all and (min-width: 992px) and (-ms-high-contrast: none) {
  .form-group__columns-3 > .form-group, .form-group__columns-4 > .form-group,
  .form-group__columns-3 > .checkbox[role=group],
  .form-group__columns-4 > .checkbox[role=group],
  .form-group__columns-3 > .radio[role=group],
  .form-group__columns-4 > .radio[role=group] {
    width: calc(33.33333333% - 1rem);
    flex-basis: auto;
  }
}
@media all and (min-width: 992px) {
  .form-group__columns-3:after, .form-group__columns-4:after {
    content: " ";
    flex: 0 0 calc(33.33333333% - 1rem);
  }
}
@media all and (min-width: 992px) and (-ms-high-contrast: none) {
  .form-group__columns-3:after, .form-group__columns-4:after {
    flex-basis: auto;
    width: calc(33.33333333% - 1rem);
  }
}

@media all and (min-width: 1200px) {
  .form-group__columns-4 > .form-group,
  .form-group__columns-4 > .checkbox[role=group],
  .form-group__columns-4 > .radio[role=group] {
    flex-basis: calc(25% - 1.125rem);
  }
}
@media all and (min-width: 1200px) and (-ms-high-contrast: none) {
  .form-group__columns-4 > .form-group,
  .form-group__columns-4 > .checkbox[role=group],
  .form-group__columns-4 > .radio[role=group] {
    width: calc(25% - 1.125rem);
    flex-basis: auto;
  }
}
@media all and (min-width: 1200px) {
  .form-group__columns-4:after, .form-group__columns-4:before {
    content: " ";
    flex: 0 0 calc(25% - 1.125rem);
  }
}
@media all and (min-width: 1200px) {
  .form-group__columns-4:before {
    order: 1;
  }
}
@media all and (min-width: 1200px) and (-ms-high-contrast: none) {
  .form-group__columns-4:after, .form-group__columns-4:before {
    flex-basis: auto;
    width: calc(25% - 1.125rem);
  }
}

Once the CSS is in place, follow these steps to assign a column layout to a section:

Open Form Builder and select the Section you want to use a column layout.
In the Render Attributes section, enter class in the Name box.
Enter the column class you want to use in the Value box.
Click Add Attribute.
If the fields you want to appear using columns were not already moved into the Section you just updated, move them now.
Make any other necessary changes, then click Save.

Keep in mind that columns are responsive by design. Even if you assign a class of form-group__columns-4 to a checkbox or radio button, the form dynamically modifies the number of columns displayed based on a page's pixel width:

Above 1199px: Four columns maximum
Between 992 and 1199px: Three columns maximum
Between 576 and 991px: Two column maximum
Up to 575px: One column maximum

Best Practices and Notes

If you only have a few forms that should use a multi-column layout, you can insert the CSS directly into the Custom Head Content of each form. However, we recommend adding the CSS to a style sheet in the bundle. That way, you can add the relevant class to a Section for any form you want to use a multi-column layout instead of having to add the CSS to individual forms.
You can assign the full-width class to a field inside a section using a column layout to make the field take up the entire width of the layout. Fields without the class will still use the column layout.