The Checkbox component allows users to select one or more options from a list. Unlike radio buttons, checkboxes are designed for multiple selections, giving users more flexibility in their responses. This is particularly useful when you want to offer a list of items and allow users to choose any number of them.
Example Checkbox
Checkboxes allow one or more options to be selected, making them more versatile than radio buttons.
When should I use Checkboxes?
The Checkbox component works best when you want users to have the option to select more than one response. Here are some common use cases:
Selecting Preferences
Use checkboxes when users need to choose multiple preferences, such as selecting meeting dates or survey answers.
Use checkboxes when users need to choose multiple preferences, such as selecting meeting dates or survey answers.
Task Lists
Checkboxes are great for leading users through tasks, especially when onboarding where users can tick off completed items.
Checkboxes are great for leading users through tasks, especially when onboarding where users can tick off completed items.
Multiple Selections
For questions that involve selecting from several categories (ex: employee type, benefits coverage), checkboxes let users choose as many as they want.
For questions that involve selecting from several categories (ex: employee type, benefits coverage), checkboxes let users choose as many as they want.
Features & Configuration
Adding a Checkbox component to your form is easy. Simply select the Checkbox option from the component library and drag it onto the canvas.
After placing the component, you can customize its properties in the right-hand panel:
Properties
Label
This text appears above the checkboxes, explaining what the user is selecting.
This text appears above the checkboxes, explaining what the user is selecting.
Width
Adjust the width of the component (1-12 columns) based on your form layout.
Adjust the width of the component (1-12 columns) based on your form layout.
Required
Enforce that users must select at least one of the options to proceed.
Enforce that users must select at least one of the options to proceed.
Horizontal
Choose to display checkbox options horizontally across the form to save vertical space.
Choose to display checkbox options horizontally across the form to save vertical space.
Options Width
If you select Horizontal, you can adjust the horizontal spacing between the options. This is most helpful when you have lots of options and want to create clear definition between columns of choices.
If you select Horizontal, you can adjust the horizontal spacing between the options. This is most helpful when you have lots of options and want to create clear definition between columns of choices.
Options
You can configure the options using one of the following methods:
List
Manually enter a list of options for users to choose from.
Manually enter a list of options for users to choose from.
Logic
Write an expression to pull options from a dataset or another form field.
Read more about connecting and referencing datasets
Write an expression to pull options from a dataset or another form field.
Read more about connecting and referencing datasets
Key Value
Use Key Value to match shorter keys with longer values, making it easier to reference complex options elsewhere in your form.
For example, if you have an option like “Yes, please record my name under this group,” but want to refer to it as simply “Yes” in your workflows or notifications, you can set “Yes” as the Key and the longer text as the Value. This way, the form displays the full option, but you can work with a simpler label behind the scenes.
Use Key Value to match shorter keys with longer values, making it easier to reference complex options elsewhere in your form.
For example, if you have an option like “Yes, please record my name under this group,” but want to refer to it as simply “Yes” in your workflows or notifications, you can set “Yes” as the Key and the longer text as the Value. This way, the form displays the full option, but you can work with a simpler label behind the scenes.
Logic
Display Logic
Control when this component shows or hides based on other inputs.
Control when this component shows or hides based on other inputs.
Validate Logic
Set specific conditions to validate the user’s selection, ensuring it meets your criteria.
Set specific conditions to validate the user’s selection, ensuring it meets your criteria.
Details
Hint
Hints are short pieces of text that appear beneath the options to provide extra clarity.
Hints are short pieces of text that appear beneath the options to provide extra clarity.
Tooltip
Tooltips are helpful text that users can see when they hover over the question mark icon next to the component.
Tooltips are helpful text that users can see when they hover over the question mark icon next to the component.
Name
You can change the Name field to a more descriptive identifier that will appear in your CSV exports.
You can change the Name field to a more descriptive identifier that will appear in your CSV exports.
ID
Each Droplet component has a unique ID for referencing in workflows or visibility settings. Edit the default ID to make it more descriptive.
Each Droplet component has a unique ID for referencing in workflows or visibility settings. Edit the default ID to make it more descriptive.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article