For those that prefer a checklist, here you go!
CREATE CUSTOM DYNAMIC RADIO BUTTONS (OR CHECKBOXES) FOR USE IN COMPONENTS
Each numbered point outlines what to do. Comments in ( ) explain the reason behind it.
Step 1: Design the radio buttons
1. Use divs to create the radio buttons. (To have greater control over styling the radio buttons)
Step 2: Create variable and logic to record the currently selected radio button
1. In the 'Data' tab, create a 'name' attribute for each radio button option, i.e. 'Option 1', 'Option 2, 'Option 3'. (To allow the name of each radio button option to be configurable at the component level)
2. Create a variable called 'Selected Option' and press the 'Fx' button to set the initial value of 'Selected Option' variable to the 'Option 1' attribute created in the previous step. (This 'Selected Option' variable will record the currently selected radio button. Setting the initial value to the 'Option 1' attribute means 'Option 1' will be the default setting on page load.)
3. In the 'Events' tab add a 'Click' event to the div containing the first radio button. (To create a workflow to update the currently 'Selected Option' variable and update the button UI to show which option is currently selected)
4. Press the '+' icon to add an action to the workflow
5. Select: 'Set: Selected Option'. (This means that when the radio button is clicked, the 'Selected Option' variable will be updated to show which button is the currently 'active' option)
6. Press the Fx button and set the input to the 'Option 1' attribute created earlier. (This will update the 'Selected Option' variable with the dynamic name of the selected radio button. Remember, the name of the option is set dynamically at the component level)
@Raphael Walters
.jpeg/public)