Create Radio button in 5 min

Here you can find how to make a radio button easily like this.
8

First add one container with icon and title
1

From advanced properties, set it is name to “choice 1” and then go to layout tab and change the layout to horizontal. Make sure to select “Align children vertically to middle” and “justify children horizontally to the left”.
Then select the “title” component, go to layout and change the left gap “S 8px”
Change the icon to “dot-circle-o” and change the color.

2

Now put the title, duplicate this container to the number of choices you want.

3

Switch to variable and add page variable. with type of list of true/false values and add values with same number of the choices you have make them all as false.
4

When the user tap the choice we will change the corresponding value in the list to true using set page variable and all other values in the list to false. So in the logic of the first icon, add set page variable flow function , bind it to the page variable ‘clicked_icon’, and then set the first value to true and others to false.

5

We will repeat the same with other icons by adding set page variable, bind it and selecting only the corresponding value to true and others to false…
Now we will go to the icon and change it is name according to the corresponding value in the list. If the value is true … it will take the icon ‘dot-circle-o’, else it will be ‘circle-o’. put the formula as the following for all icons and change the list index to the correct one.

IF(pageVars.clicked_icon[0], “dot-circle-o”, “circle-o”)

6

Now the last step, when the page is mounted we want to make the first radio button to appear as selected so we add set page variable to the page mounted and set the first value in the list to ‘true’.

7

hope it is helpful :slight_smile: .

6 Likes

Thank you! It is really helpful :grinning:

1 Like

Gracias y muy buen explicado :+1:

1 Like

this is a video explaining …

1 Like

Just published a customizable radio button component. Share token: -9Zu5UuLXvHqeIgZbQN7dg

The preview doesn’t show the icons, but they are there.

2 Likes

@Iyad_Helwani Thanks a lot :pray:

1 Like