Transcript

In this Quick Tip, we're going to learn about the Radio Buttons element. With this element, a list of buttons where users can choose one option will be displayed. We use this to create engaging forms for users to submit.

When we add this element to the page, we are given what looks like a Checkbox with a choice label and a button to click that choice. The difference is that we can include multiple choices within this element, but the user can only select one choice from this radio button. If you wanted to create something with multiple choice selections, you would typically use multiple Checkbox elements.

In the Property Editor, we can define between a static list of choices or dynamic. If it's dynamic, we must set the type of choice we are expecting, as well as the source for the list of choices. Finally, we must pick the field that is appropriate for each radio button's caption.

Sometimes you may want to pre-select which value the radio button should display by default. In this case, we can give them a default value here using the "Default value" property. So if it were static text, we could type this in and watch as our selection matches what we type.

Finally, we can display this list of choices in a flexible way with how many columns we create as well as change the color of the button.

When we use this element in workflows, we check the value of the choice the user selected. So if it's static text, we type that in; or, if it's dynamic, we retrieve what the final value is so we can use it.

Experiment by adding your own Radio Buttons elements to your app!

That's it for this Quick Tip! For more, be sure to check out bubble.io/academy.