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
- Unique
- 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.
Add Option
Click this button to add a new option to your field.
Bulk Edit Options
Use the Bulk Edit link to add, edit, or remove a lot of options quickly.
Click the 'Bulk Edit Options' link and type or paste your options into the box that appears. You can also use this option to populate your field choices with a ready-made list of Countries, U.S. States, U.S. State abbreviations, age ranges, levels of satisfaction, importance, or agreement.
To bulk edit options with separate values, 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 the 'Add Other' box to add this option.
Use separate values
Check this box if you would like to store an entry as a value distinct from the selected value. For example, if your user selects 'black t-shirt', you can store the value as 'black t-shirt $25.00'.
If you would like to read more about separate values, click here.
Alignment
By default, the option alignment is set to 'Multiple Rows'. If you would like all the options on one line, change Alignment to 'Single Row'.
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.
- Add options until you have as many as you need.
- In the field options, select Use separate values.
- In the 'Option Label' column, insert the image URL. It should look something like this:
- In the 'Saved Value' column, insert a text value.
- 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.
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?
- Add a checkbox field to your form
- 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>.
- In the field settings, mark the field required and set the label position to "none".
- 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.
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.
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.
