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 Button fields 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. Select the field in the form builder to see them in the Field Options tab. Most of them are in the Advanced section, so click Advanced to show them.

The Checkboxes Options section is covered in Field-specific options below.

With Advanced open, the panel shows the options below. Validation Messages and Conditional Logic are separate sections under it. Click either heading to expand it.

• Field Type
• Required
• Field Key
• Field Description
• 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.

Add option

Each option in the list has a plus (+) icon next to it. Click it to add a new option to your field.

Reorder individual checkbox, radio, or dropdown options by dragging the drag icon to the left of each option.

A popup message appears when you add a duplicate option value. This prevents issues with duplicate values in a field.

Bulk edit options

To add, edit, or remove many options at once, use the Bulk Edit Options link above the list of options. Checkboxes, dropdowns, and radio buttons all have it.

Click Bulk Edit Options and type your choices into the box that appears, one per line. To fill the box with a ready-made list, pick one of the presets: Countries, U.S. State Abbreviations, U.S. States, Age, Satisfaction, Importance, Agreement, or Likely.

To bulk edit options with separate values, first check Use separate values. Then put the label, followed by a |, followed by the value. For example:

Excellent|10
Very Good|8
Fine|5
Not so great|3
Poor|1

Add "Other"

Allow users to enter free text with an "Other" option. Click Add "Other" below the list of options to add it. When the user selects "Other" on the front end, a text box appears where they type their own answer.

To show a hint inside that text box, type it in the Other placeholder box under the "Other" option. The placeholder disappears as soon as the user starts typing. The box is empty by default, so no placeholder shows.

Use separate values

The Use separate values box stores a value that differs from the option the user selects. It's unchecked by default.

For example, if your user selects black t-shirt, you can store the value as black t-shirt $25.00. Use [x show="value"] to display the saved value, where x is the ID or key of the field.

Option layout

The Option Layout dropdown in the Advanced section sets how the options are arranged:

• Use Style: The field follows the option layout set in its form style, shown in brackets, such as Use Style (One Column). This is the default. The layout is then managed from one place, so every checkbox or radio field that uses that style updates together.
• One Column: Stacks each option on its own line.
• Two Columns, Three Columns, or Four Columns: Arranges the options into that many columns.
• Inline Options: Puts all options on a single line.

To give one field a different layout from the other fields that use the same style, choose any option other than Use Style. The Option Layout dropdown is hidden when the field shows its options as images.

Selection maximum

The Selection Maximum box limits how many options the user can select at once. It's empty by default, so there is no limit. This option is only in Checkboxes fields.

After the user reaches the limit, the remaining unchecked options become unavailable. To choose a different option, the user first deselects one of the selected options.

Selection minimum

The Selection Minimum box sets the fewest options the user must select. It's empty by default, so there is no minimum. This option is only in Checkboxes fields.

The minimum applies once the user selects at least one option. To make sure the user selects at least one option, also make the field Required.

Set option limits

To cap how many times each option can be selected across all entries, check Set option limits. It's unchecked by default. Leave an option's limit blank to keep it unlimited. See Selection Limits for Checkbox, Radio Button, and Dropdown Options for the settings.

Generate options with AI

To fill in the field's options with AI, click Generate with AI in the options section. It works with the Formidable AI add-on and an Elite or Business license.

Default values and field icons

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

Field action icons allow you to duplicate, delete, 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 the Check Box & Radio Fields section of your style. Adjust the styling of your option labels and the default option alignment there.

1. Go to Formidable → Styles. The style editor opens on Quick Settings. Click Show advanced settings at the bottom of the panel.
   

   

2. Click Check Box & Radio Fields to open the section.
   

   

   The Check Box and Radio settings set the default option layout: One Column or Inline Options. Formidable Forms Pro adds Two Columns, Three Columns, and Four Columns.

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

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 can add labels to the grid.

Edit checkbox options

To modify an individual Checkbox or Radio Button option, see the edit radio/checkbox options section.

Hide option labels

To hide your Checkbox or Radio Button option labels, see the hide option label section.

Include a link to agree to terms

Link to an existing terms and conditions page on your site and require agreement from within your form.

1. Add a Checkboxes field to your form. Click the field to open its field options, and give it a label, such as Terms. The label is hidden on the form, but the required error message uses it ("Terms cannot be blank.").
2. In the field options, check Required.
3. In the Checkboxes Options section, check Use separate values. Do this before you add the link, so the saved value stays free of HTML.
   Use separate values is a premium feature.
4. Replace the text of Option 1 with the following. Then click the minus icon next to Option 2 to delete it, so agreeing to the terms is the only choice.
   

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

   Replace https://example.com/terms with the full address of your terms page.
5. In the saved value box under the option, replace Option 1 with a value without HTML, such as "I agree".
   

   

6. Click Advanced to expand it, and set Label Position to None.
7. Click Update to save your changes. On a new form that hasn't been saved yet, the button says Save.

To include the terms within the form instead, 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, display the Saved Value with 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, use conditional statements. The following example displays 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

To display text in between checkbox or radio options:

1. Go to your form's Settings → Customize HTML tab.
2. Find the box for your checkbox 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 add any text you want 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>

Replace x with the field ID of your checkbox field.

Display values checked in columns

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

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

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

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

In 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

To display the values checked in a three-column layout where all the values are listed horizontally, 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 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 a 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.