Show Radio or Checkbox Options in Multiple Columns on Forms

If you have many options in your checkbox or radio fields that you’d like to list vertically, the field may end up taking lots of vertical space. Splitting your field options up into multiple columns will help create a more ideal viewing experience in these cases.

To apply columns to all checkbox and radio fields in your form, add the below CSS code to your page. The samples shown below both create 3 columns so do change that number as needed.

.tb-checkbox-outline{
columns: 3;
}

To apply columns to specific fields within your form, utilize the below CSS code within your page. Replace “field_63” with your field’s ID.

#field_block_field_63 > div > div{
columns: 3;
}
4 Likes

If you’re not sure how to locate field IDs, you can do this through the Data Builder. Open your checkbox or radio field to edit and you’ll find the field ID on the top right corner of the module.

1 Like