Yesterday I built a custom checkbox component, so today I am going to build on the same principle. Check first the earlier post, before continue here, so you can see the small details.

Custom radio button

Step 1. – Create an option set with images

In the data tab of bubble, create a new option set with two attributes: Display and Image.

Define an option set

Step 2 – Create a reusable component

Bubble says reusable elements, but since I am react developer as well, I prefer using the component word, since we built a separate component with its own logic.

The below picture you can see, the reusable component consists of:

  • radio button icon
  • option set’s image
  • option set’s display text

Step 3 – Create the logic/workflow

Create a state for the top, aka parent element which is the reusable element itself. The state name: Radiobutton state – option set: Property Hot Water (this is my option set name). Important to know this is not a list, it is just a value.

Radiobutton State

I want the radiobutton to be triggered when somebody click either on the image/text/icon so I defined the workflow on the inner group inside the repeating group cell.

The green workflow is about to add an active state to the radio button of the current cell, means the radiobutton will be selected to the current cell. We only run this workflow when current cell IS NOT equal the custom state of the component.

Wokrflow – add radiobutton (green)

The action is a set state, when we add the current cell to the state. Means the state is equal the current cell’s value.

Wokrflow – add radiobutton (green) – ACTION

The red workflow means we remove the current cell value from the state. (yes this is not really a radio button, since the radio button only loose its focus when another is selected)

Wokrflow – remove radiobutton (red)

The final step of the workflow is to remove the state, means delete the states, means give a state a null value, means give nothing to the state.

Wokrflow – remove radiobutton (red) – ACTION

Step 4 – Finishing by adding a checkbox icon to the UI

Since only the state contains the current cell’s value, but on the frontend the icon is still an empty circle, so we are gonna change that to a filled radio button circle with a conditional statement. The statement says if the component state display is equal the parent group’s (aka cell) option set value’s display, which evaluates to true, in bubble term means evaluates to yes, then we change the icon.

Change radio button icon

I am available for bubble projects, contact me to make your next application together!

Leave a Reply

Your email address will not be published. Required fields are marked *