Making Checkbox and Radio Select Form Fields Two Columns

[wspiro]

A checkbox or radio select field on a form that has numerous options creates a huge list of choices which can detract from the overall design of a form, and the look of a page. These long checkbox or radio select stacks are not great from a UX perspective.

If you have checkbox or radio select field types on your form with more than six options, you may want to organize them into two columns to make the form more manageable and user friendly. This quick CSS tip can tighten up your form design and make your select options easier to read.

The CSS to allow your checkbox and radio select fields to stack in two columns is as follows: 

/* This allows the checkbox and radio select list items to only take up 50% of their container, and floats the list items left which allows multiple items to sit in the same row. */
li.hs-form-checkbox,
li.hs-form-radio {
     float: left;
     width: 50%; /* NOTE: This percentage may need to be lower if you have margins applied to the list items */
     list-style: none;
}

NOTE: If your radio and checkbox values live on the line below the check/radio node (as pictured on the left above), the following CSS may help you get the values to sit next to the nodes:

body form.hs-form fieldset[class*="form-columns"] .hs-input[type="radio"],
body form.hs-form fieldset[class*="form-columns"] .hs-input[type="checkbox"] {
     width: auto;
}

Keep in mind this styling will affect any form with a checkbox or radio select field on it, so be careful where you apply this CSS. I would recommend applying a new class to the forms you want updated to make sure you do not make any unwanted design changes elsewhere on your website. For example, you could apply the class .checkradio-2-col to the forms you wanted to update, so your selectors would look as follows:

.checkradio-2-col li.hs-form-checkbox,
.checkradio-2-col li.hs-form-radio {}

[BrettLanguirand]

Thanks for the awesome post @wspiro!

This will definitely help a lot of customers, because not only is it informative, but it is easy to read and understand.  

One follow up question - What are your suggestions for this concept on mobile?  Do you find that there is enough width on a moble device for the radio selects/checkboxes in 2 columns, or do you recommend styling them in one column for mobile?  I'm sure that the amount of text is a factor, but just wondering what you think.

Thanks again for the great post!

Brett

[wspiro]

@BrettLanguirand Great Question!

From a user experence perspective, the benefit of two column checkbox or radio options is even greater on mobile. With a small device or browser window, such as on a phone, the visitors viewport is very small which would make a long list of select options potentially take up multiple scrolls worth of the page.

You are absolutely correct in that the amount or length of text for the checkbox/radio options dictates how you handle the responsiveness of the form. For short select options, you can keep the two columns for mobile (if they fit), however, if text starts to run into two lines, you may want to write a media query to make the field only take up one column when the browser width hits a certain pixel threshold. 

This could be accomplished through a media query (targeting the same selectors you used to make the fields two columns) like:

@media (max-width: 400px) {
     .checkradio-2-col li.hs-form-checkbox,
     .checkradio-2-col li.hs-form-radio {
          width: 100%;
     }
}

This CSS will return the checkbox and radio select fields which you targeted to take up two columns, switch to only taking up one column when the browser width is less than 400px. In these instances where you can not fit your options in two columns on mobile, other ideas to improve the UX of a long list of select options could be to slightly lower the font-size or slightly decrease the space between your checkbox/radio options. 

[gil100]

I'm not a developer so forgive a potentially dumb question.

I've added the above code to the page CSS, but in one of the questions, since I have an off amount of answers, at the place of the non-existance next checkbox at the end of that question, the next question appears. (Instead of appearing in the next line).

How do I fix it?

[wspiro]

Hey @gil100! 

Great point - and this is not a dumb question at all! This is actually something I had not thought about. You could use something like the following to addrsss this:

form.hs-form ul.inputs-list.multi-container {
    overflow: auto;
}

That should do it and I can not think of any unwanted ramifications of this, but if it does not work for you, please send along an example page and I am happy to dig in further!

All the best!

William

[gil100]

Is this piece of code comes with or instead of the one you wrote above?