Checkboxes and Radio Buttons

Checkboxes and Radio Buttons are very similar. They both display a list of options which a user can select from. Checkbox fields allow the user to select one or more options and boxes can be checked and unchecked. Radio Buttons fields will allow only one option to be selected. A Radio Button cannot be unchecked.

Standard field options

Checkbox and Radio Button fields have the following standard options:

• Field Type
• Required
• Field Key
• CSS Layout Classes
• Label position

• Read Only
• Display format: Images
• Visibility
• Conditional logic
• Dynamic default value

Field-specific options

In addition to the standard field options, Checkbox and Radio Button fields have several field-specific options. Browse the sections below to learn more about the options specific to Checkbox and Radio Button fields.

Default values and field icons

Set a dynamic default value in your Checkbox or Radio Button field. If you would like to retrieve a value from an entry see the Get a Value From an Entry page. If you would like to set a default value, see the Default Values page.

Field action icons allows you to duplicate, delete, and/or move a field on the form builder page. See field action icons for more information.

Field styling

Some checkbox and radio field-specific styling is available in Formidable → Styles → Check box & Radio Fields. You may adjust the styling of your option labels and adjust the default option alignment.

To learn more about styling your form see the visual form styler page.

Add images to Checkboxes or Radios

Learn how to use radio buttons or checkboxes with images.

See how to replace radio buttons with images in WordPress forms in the blog for an example.

Display options in a grid

If you would like to display your Checkbox or Radio fields in a grid as shown below, see how to create a grid.

Once you have a grid set up, you may add labels to the grid.

Edit checkbox options

If you would like to modify an individual Checkbox or Radio Button option, see the edit radio/checkbox options section.

Hide option labels

If you would like to hide your Checkbox or Radio Button option labels, see the hide option label section.

Include a link to agree to terms

Do you have an existing terms and conditions page on your site that you would like to link to and require agreement from within your form?

1. Add a checkbox field to your form
2. Add a new option that looks like this:

   I agree to the <a href="URL_of_your_terms.com" target="_blank">user agreement terms</a>.

3. In the field settings, mark the field required and set the label position to "none".
4. Select the "save separate values" option and change the saved value to something without HTML for best results ie "I agree".
   

If you would prefer to include the terms within the form, read more about how to create a terms and conditions field.

Display Checkbox and Radio fields

Display the value submitted in a Checkbox or Radio Button field in a form's confirmation message, email, or View.

• Display submitted options: Display the value submitted in a Checkbox or Radio Button field.

  [x]

  Replace x with the ID or key of the Checkbox or Radio Button field.

• Display saved value: If using separate values and you would like to display the Saved Value use show="value":

  [x show="value"]

  Replace x with the ID or key of the Checkbox or Radio Button field.

• Separator: Use a different separator for Checkbox field values. By default, this will be a comma.

  [x sep=", "]

  Replace x with the ID or key of the Checkbox field.

Display unchecked options

To display the unchecked checkbox or radio options in a form's confirmation message, email, or View, you can use conditional statements. The following example will display an option when the checkbox or radio field does NOT contain a specific word or phrase.

[if x not_like="Easy"]Easy[/if x]
[if x not_like="Moderate"]Moderate[/if x]
[if x not_like="Challenging"]Challenging[/if x]

Replace x with the ID or key of the checkbox or radio field. Replace Easy, Moderate, Challenging with the field options. If field x does NOT contain the checkbox or radio option, then the content between the opening and closing If statements will be displayed.

Related customizations

Display text in between options

If you would like to display text in between checkbox or radio options, follow the steps below.

1. Go to your Form Settings → Customize HTML tab.
2. Find the box for your checkbox button or radio field.
3. Look for the [input] shortcode in the HTML code.
   
4. Change [input] until you have separated each option in the field. Then you can add any text you would like between the options.

   [input opt=1]
   [input opt=2]
   [input opt=3]
   ...

Display values checked in a View

Replace the field ID of your checkbox field in the view you are using with:

<div>
☑-[x sep="</div><div>☑-"]
</div>

Where x is the field ID of your checkbox field.

Display values checked in columns

In the example below, you'll be displaying the values checked in three columns by adding a class and some CSS styling.

In the View Content box, add the following:

<div class="frm-three-columns">[100 sep="<br>"]</div>

Replace 100 with the ID or key of the Checkbox field.

In the Formidable → Global Settings → Custom CSS, add the following:

.frm-three-columns {
  -webkit-columns: 100px 3; /* Chrome, Safari, Opera */
  -moz-columns: 100px 3; /* Firefox */
  columns: 100px 3;
}

Display values checked in a horizontal column

If you want to display the values checked in a three column layout wherein all the values are listed horizontally by default, follow the steps below to add a class and some CSS styling.

In the Listing Page Content box of your View, add the following:

<div class="frm-three-columns"><div>[264 sep="</div><div>"]</div></div>

Replace 264 with the ID or key of the Checkbox field.

In the Formidable → Global Settings → Custom CSS, add the following:

.frm-three-columns {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.frm-three-columns > * {
    width: calc(100% / 3);
}

Display checkbox items in a list

Use the example below to display values checked in a bulleted list.

<ul>
<li>[100 sep="</li><li>"]</li>
</ul>

To display the values checked in a numbered list, use this instead.

<ol>
<li>[100 sep="</li><li>"]</li>
</ol>

Replace 100 with the ID or key of the Checkbox field.

Related developer hooks

• Dynamically populate checkbox fields with the frm_setup_new_fields_vars hook.
• Remove used options with the frm_setup_new_fields_vars hook.
• Order field options with the frm_setup_new_fields_vars hook.
• Add user list to checkboxes or radio buttons with the frm_setup_new_fields_vars hook.
• Create a new set of preset Bulk Edit options with the frm_bulk_field_choices hook.
• Require a minimum number of checked values with the frm_validate_field_entry hook.