How to Display Checkboxes and Radio Buttons Using Columns

Checkboxes and radio buttons are displayed horizontally on the page by default, but a long list of items can look disorganized when displayed horizontally. You can configure your form settings to display these options using up to four columns.

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
`vertical`	v5.0.8
`columns`	v5.0.15
`columns-3`	v5.0.15
`columns-4`	v5.0.15

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.

.checkbox.vertical > label:not(.field-label),
.radio.vertical > label:not(.field-label) {
  display: block;
}
.checkbox.vertical.columns, .checkbox.vertical.columns-3, .checkbox.vertical.columns-4,
.radio.vertical.columns,
.radio.vertical.columns-3,
.radio.vertical.columns-4 {
  column-gap: 1.5rem;
  column-count: 1;
}
.checkbox.vertical.columns > label.field-label, .checkbox.vertical.columns-3 > label.field-label, .checkbox.vertical.columns-4 > label.field-label,
.radio.vertical.columns > label.field-label,
.radio.vertical.columns-3 > label.field-label,
.radio.vertical.columns-4 > label.field-label {
  column-span: all;
}
.checkbox.vertical.columns > label:not(.field-label), .checkbox.vertical.columns-3 > label:not(.field-label), .checkbox.vertical.columns-4 > label:not(.field-label),
.radio.vertical.columns > label:not(.field-label),
.radio.vertical.columns-3 > label:not(.field-label),
.radio.vertical.columns-4 > label:not(.field-label) {
  margin-right: 0;
}
@media all and (min-width: 576px) {
  .checkbox.vertical.columns, .checkbox.vertical.columns-3, .checkbox.vertical.columns-4,
  .radio.vertical.columns,
  .radio.vertical.columns-3,
  .radio.vertical.columns-4 {
    column-count: 2;
  }
}
@media all and (min-width: 992px) {
  .checkbox.vertical.columns-3, .checkbox.vertical.columns-4,
  .radio.vertical.columns-3,
  .radio.vertical.columns-4 {
    column-count: 3;
  }
}
@media all and (min-width: 1200px) {
  .checkbox.vertical.columns-4,
  .radio.vertical.columns-4 {
    column-count: 4;
  }
}
.checkbox:not(.vertical).columns, .checkbox:not(.vertical).columns-3, .checkbox:not(.vertical).columns-4,
.radio:not(.vertical).columns,
.radio:not(.vertical).columns-3,
.radio:not(.vertical).columns-4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.checkbox:not(.vertical).columns > label, .checkbox:not(.vertical).columns-3 > label, .checkbox:not(.vertical).columns-4 > label,
.radio:not(.vertical).columns > label,
.radio:not(.vertical).columns-3 > label,
.radio:not(.vertical).columns-4 > label {
  flex: 0 0 100%;
}
@media all and (min-width: 576px) {
  .checkbox:not(.vertical).columns > label:not(.field-label), .checkbox:not(.vertical).columns-3 > label:not(.field-label), .checkbox:not(.vertical).columns-4 > label:not(.field-label),
  .radio:not(.vertical).columns > label:not(.field-label),
  .radio:not(.vertical).columns-3 > label:not(.field-label),
  .radio:not(.vertical).columns-4 > label:not(.field-label) {
    margin-right: 0;
    flex: 0 0 calc(50% - 0.75rem);
  }
}
@media all and (min-width: 576px) and (-ms-high-contrast: none) {
  .checkbox:not(.vertical).columns > label:not(.field-label), .checkbox:not(.vertical).columns-3 > label:not(.field-label), .checkbox:not(.vertical).columns-4 > label:not(.field-label),
  .radio:not(.vertical).columns > label:not(.field-label),
  .radio:not(.vertical).columns-3 > label:not(.field-label),
  .radio:not(.vertical).columns-4 > label:not(.field-label) {
    width: calc(50% - 0.75rem);
    flex-basis: auto;
  }
}
@media all and (min-width: 992px) {
  .checkbox:not(.vertical).columns-3 > label:not(.field-label), .checkbox:not(.vertical).columns-4 > label:not(.field-label),
  .radio:not(.vertical).columns-3 > label:not(.field-label),
  .radio:not(.vertical).columns-4 > label:not(.field-label) {
    margin-right: 0;
    flex: 0 0 calc(33.33333333% - 1rem);
  }
}
@media all and (min-width: 992px) and (-ms-high-contrast: none) {
  .checkbox:not(.vertical).columns-3 > label:not(.field-label), .checkbox:not(.vertical).columns-4 > label:not(.field-label),
  .radio:not(.vertical).columns-3 > label:not(.field-label),
  .radio:not(.vertical).columns-4 > label:not(.field-label) {
    width: calc(33.33333333% - 1rem);
    flex-basis: auto;
  }
}
@media all and (min-width: 992px) {
  .checkbox:not(.vertical).columns-3:after, .checkbox:not(.vertical).columns-4:after,
  .radio:not(.vertical).columns-3:after,
  .radio:not(.vertical).columns-4:after {
    content: " ";
    flex: 0 0 calc(33.33333333% - 1rem);
  }
}
@media all and (min-width: 992px) and (-ms-high-contrast: none) {
  .checkbox:not(.vertical).columns-3:after, .checkbox:not(.vertical).columns-4:after,
  .radio:not(.vertical).columns-3:after,
  .radio:not(.vertical).columns-4:after {
    flex-basis: auto;
    width: calc(33.33333333% - 1rem);
  }
}
@media all and (min-width: 1200px) {
  .checkbox:not(.vertical).columns-4 > label:not(.field-label),
  .radio:not(.vertical).columns-4 > label:not(.field-label) {
    margin-right: 0;
    flex: 0 0 calc(25% - 1.125rem);
  }
}
@media all and (min-width: 1200px) and (-ms-high-contrast: none) {
  .checkbox:not(.vertical).columns-4 > label:not(.field-label),
  .radio:not(.vertical).columns-4 > label:not(.field-label) {
    width: calc(25% - 1.125rem);
    flex-basis: auto;
  }
}
@media all and (min-width: 1200px) {
  .checkbox:not(.vertical).columns-4:after, .checkbox:not(.vertical).columns-4:before,
  .radio:not(.vertical).columns-4:after,
  .radio:not(.vertical).columns-4:before {
    content: " ";
    flex: 0 0 calc(25% - 1.125rem);
  }
}
@media all and (min-width: 1200px) {
  .checkbox:not(.vertical).columns-4:before,
  .radio:not(.vertical).columns-4:before {
    order: 1;
  }
}
@media all and (min-width: 1200px) and (-ms-high-contrast: none) {
  .checkbox:not(.vertical).columns-4:after, .checkbox:not(.vertical).columns-4:before,
  .radio:not(.vertical).columns-4:after,
  .radio:not(.vertical).columns-4:before {
    flex-basis: auto;
    width: calc(25% - 1.125rem);
  }
}

One Column

To display a list of checkbox or radio button values in a single column, you can simply add a classRender Attribute with a value of "vertical".

fruit list horizontal — List of checkbox values with no class assigned

screenshot-kinetic-documentation.kinops.io-2019.01.03-12-58-53 — List of checkbox values with a class of **vertical** assigned in the Render Attributes

Multiple Columns

A single column may take up too much vertical space on a form. In this situation, you can use the various column classes to display values using a multi-column layout.

Follow these steps to assign a column layout to a checkbox or radio button field:

Open Form Builder and select the checkbox or radio button 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.
Make any other necessary changes, then click Save.

Keep in mind that columns are responsive by design. Even if you assign a class of 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

If you only have a few Forms with checkboxes in columns, 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 simply add the vertical class to the checkbox field for any Form you want to use this format instead of having to add the CSS to individual forms.