The Radio Button component in Droplet lets users select one option from a predefined list. The list can be manually entered or come magically from logic or a dataset. It’s perfect for collecting single-choice responses in a clean and intuitive way.
Example Radio Button
A radio button only allows one option to be selected.
When should I use Radio Buttons?
The Radio Button component works best when you need users to select a single option from a list. Here are some common use cases:
Survey Questions
Use radio buttons for quick, one-answer questions like “How satisfied are you with our service?”
Use radio buttons for quick, one-answer questions like “How satisfied are you with our service?”
Event RSVP
Use it to allow respondents to choose one attendance option, such as “Yes” or “No.”
Use it to allow respondents to choose one attendance option, such as “Yes” or “No.”
Product Preferences
Let users choose one option from a set, such as “Small”, “Medium”, or “Large”.
Let users choose one option from a set, such as “Small”, “Medium”, or “Large”.
Features & Configuration
Adding a Radio Button component to your form is easy. Simply select the Radio Button 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 radio buttons, explaining what the user is selecting.
This text appears above the radio buttons, 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 one of the options to proceed.
Enforce that users must select one of the options to proceed.
Horizontal
Choose to display radio buttons horizontally across the form to save vertical space.
Choose to display radio buttons 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