HOW TO MAKE SELECTION LIKE THIS IN WAPPLER.
Hi @itmaster,
Make a set of buttons using icons/images and your text (card, jazzcash etc.)
Add a variable to store the current selection. If you want a default set the initial value of the variable to the button’s ‘value’ - (the string that you’ll add to the variable for that option - poss. card, jazzcash, mobile etc)
Set the buttons to have a dynamic click event that updates the variable value with the string
In your form have a hidden field that has a dynamic attribute value set to the variable’s value
For the selected tick:
Add css to your custom styles for an overlaid tick and border etc (lots of examples on Google)
Set each button to have a dynamic attribute for toggle class with the condition of variable value == ‘value string’ and the class name set to whatever class you added to the custom styles
1 Like
Hi @itmaster
For the check mark css you want to do something like the solution shown here (the one with the green tick) https://stackoverflow.com/questions/44703192/css-post-checkmark-in-upper-left-corner-of-div
Click the run the code snippet button to see it in action.
You could adapt this for the styles and as @bpj pointed out use the class toggle on variable change to swap out the styles.
2 Likes