Radio Buttons

Adding and styling radio buttons.

What are Radio Buttons?

Radio buttons are parts used in forms to allow users to select one option from a list of choices.

Radio buttons provide a clear and intuitive way for users to make a single choice from a list. The visual feedback of selecting one option while others are deselected helps users understand the exclusivity of their choice. They also prevent users from selecting incompatible options, reducing the likelihood of input errors.

Location in the Parts Library: Base Parts > Data Input > Radio Button

Example of a List of Radio Buttons

To add a radio button part, select the part where you’d like to add your radio button/s and click ‘+’.

Editing Radio Buttons

Any text next to the radio buttons can be changed using the Text Editor and styled using the Font Editor. You can change the font family, size, weight, line height, and style.

Adding A Model, Name, and Value

Radio buttons are typically used in situations where a list of options is provided, and only one selection can be made. To do that, the radio buttons need to be given a name and a state model to group them so that their 'group' is identified, and then the selection within that group can be identified.

Let's say we have an example where we ask our users to select their favorite fruit from a group of three fruits.

First, we edit the text next to each radio button to provide the correct list of options.

Then, each of the radio buttons is configured to ensure they have a model, a name, and a value. The property editors for these are shown below:

Radio Button Property Editors - Where to Set the Name, Model and Value

We can also set one of the options as a default option so that it is checked. If we're using the radio buttons in a form that is collecting data, we might also want to set the name of the radio buttons so the choice makes sense when the results are displayed in a database or emailed.

In the example, we want our list of fruits to be:

• Pineapple

• Strawberry

• Orange

The process for setting up our radios in this list is as follows:

1. Update the text next to each radio button.

2. Duplicate any list items (which will include the radio button and text), editing any text, until all the options are in the list.

To set up the state model, name, and values:

1. Update the first radio button (Pineapple) to apply a Name. This is the name that will need to be applied to the whole radio button group, meaning that every item in this radio group will have the same name. Do this by selecting the Name in the right property editor, and giving the radio group a name such as 'Fruit'.

2. Apply a State Model to the first radio button, using the right property editor, and giving the state a label. The label can be the same or different from the Name. In this case, we'll call the State the same thing as the Name - 'Fruit'. This state will need to be applied to every radio button in this group.

3. Then update the value of the radio button by calling it 'pineapple'. The value will indicate what the first item is called in the list. It doesn't have to be the full text, just something that you will recognize. The name could be the same as that in the state model or similar. For this example, the name will also be 'Fruit'.

4. Update the second radio button (Strawberry) to apply the same name 'Fruit', and the same State Model of 'Fruit'. Then update the value of the radio button by calling it 'strawberry'.

5. Update the third radio button (Orange) to apply the same name 'Fruit', and the same State Model of 'Fruit'. Then update the value of the radio button by calling it 'orange'.

6. If you'd like to set a default radio button as being checked, say the first one in the list, then select the first radio button. Go to the State Model editor, then write the value of the first radio button there - in this case, it is 'pineapple'.

To see this in action, press play on the following short video:

Adding a Model, Name and Value to Radio Buttons

If you had a second radio button group, the state, and the name need to be different from the other radio group.

Adding Another Radio Button to Your Radio Group

To add a radio button and text to a list, select an existing item (making sure to select the right parent part), and duplicate it using the edit menu in the top toolbar. Here's how:

Adding Another Radio Button to a Group of Radio Buttons

Changing the Colors of Radio Buttons

Radio buttons have more color properties than most other parts. To color the radio button when it is not checked, set the background color. To color the radio button when it is checked, set the foreground color.

You can also change the colors of radio buttons in an active state, when focused, and on hover. These are done the same way for foreground and background color.

To change the radio button color when the radio button is being hovered, select the radio button and open the 'Colors on Hover' editor on the right. Now you can set your preferred background and foreground color combination to signify that the radio button is being hovered.

The 'Color on Focus' editor on the right refers to the color of the radio button after it has been clicked, or if the user tabs to the radio button.

The 'Color on Active' editor on the right refers to the color of the radio button when it is active (the moment it is clicked).

The background colors of an unchecked radio button can be a color gradient.

Sizing

Radio buttons come with preset sizes, as well as the ability to set the exact size. The preset sizes can be made responsive.

Rounding

Default radio buttons are naturally round.

Radio buttons can have the rounding removed, or amended using the Decoration Editor, in the 'Rounding' tab.

Rounding can be applied to all of the radio button, the top left, top right, bottom left, and bottom right, or a combination of these. There are various degrees of rounding ranging from none to full, with incremental size points in between.

Related Information

Colors

Rows and columns

Text

Customizing and formatting