Check boxes

Checkboxes alignment

By default, an empty label beside the checkboxes keeps them aligned to the input fields.



It is possible to align a checkbox to the labels, that is to the left side of the form (the right side on RTL languages) by adding two simple style-sheet rules.

Note
The procedure described here requires you to be familiar with css. If you don't fully understand the code shown in the example, or if you are unable to adapt it to your website or specific needs, then you should consider the idea of hiring a web designer or take the time to learn the css language yourself.

Using your favourite developer tool, take note of the "id" of your checkbox. In the example below, it is "mid_65-checkbox4".



Then hide its associated label by adding a css rule to the current stylesheet:

By hiding the label, the checkbox slips to the left side, but it preserves its original length.



We could enlarge its width to fit the whole horizontal space available. For that purpose, another css rule is needed:

This is the final result:



Differences between Checkboxes and Checkbox Groups

A Checkbox holds a binary value, it can be only "yes" or "no", and nothing else. It can never be in undefined states, such as "not set" or "empty". When the checkbox is not selected, its value is "no".
As a result, every Checkbox always appears in the notification email and in the CSV export, showing its value, "yes" or "no", depending on whether its state was "selected" or "unselected" respectively.
It's used when a boolean value is appropriate, for example:
"Agree with terms and condition" → no.

On the other hand, a Checkbox Group holds multiple values, all of which contributes to the final value of the Checkbox Group field, which stores the entire series of values selected as a whole.
It's used when a large series of unselected values is not desirable, for example:

"Select your interests"
☐ Music
☑ Sports
☐ Archery
☑ Travelling
☐ Artificial Intelligence
☐ Video Game
☐ Chess
and so on ...

A boolean representation of the field would be as follows:
"Select your interests" → Music: no, Sports: yes, Archery: no, Travelling: yes, Artificial Intelligence: no, Video Game: no, Chess: no, and so on...

That's how the Checkbox Group element represents the selection above instead:
"Select your interests": Sports, Travelling

Each Checkbox Group always appears in the notification email and in the CSV export, but only the selected items will be listed.

If the Checkbox Group is defined as non-mandatory, it can even hold an "unselected state". When no item is selected, the items list is empty, but this is true for text field as well, when they are not mandatory.