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
• 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 a Checkbox or Radio field

If you would like to add images to a Checkbox and/or Radio Button field, follow the directions below.

1. Add options until you have as many as you need.
2. In the field options, select Use separate values.
   
3. In the 'Option Label' box, insert the image URL. It should look something like this:
   
4. In the 'Saved Value' box, insert a text value.
   
5. Save the form and click Preview. Now when the form is visited, it will show a list of images. When an image is selected, it will save the text value of that image.
   

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

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.

Related Customizations

Display text in between options

Go into your the Form 'Settings' > 'Customize HTML' tab. Find the box for your radio button or checkbox field. Look for [input] in the HTML. Change [input] to

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

until you have separated out each option in the field. Then you can add any text you would like between the options.

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 → Styles → Custom CSS, add the following:

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

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.