First of all, just want to say I love weweb! I enjoyed Dreamweaver in the past, and it reminds me of it.
What is your advice on how to create radio button that can have an associated image for each option? I want it to have either text or image, depending on the data. The OOB radio button works really well and easy to implement with text, but I think with images, I might need to implement individual radio buttons of some sort, handle the selection and adding image elements for each. Any suggestions are appreciated! Thank you!
Welcome @jalbautista
Easiest way would be to create a component in WeWeb. This way, you can scope the logic associated to it. I would expose a list prop that takes in an id, label and image_url. You can condition the visibility of your elements depending on your data.
That would mean creating all from scratch (visual states, logic). And some accessibility features might be tricky to add (keyboard navigation for instance)
The other path would be to create a custom component where you’d have more control over everything.
If you go the WeWeb component route JP mentioned, this is the layout that’s worked for me without much code:
1. Inside the component, add a component variable selectedId and a property options (array of objects with id, label, image_url).
2. Add a container and bind its repeat to options. Each item is a container with an image (visible when image_url is not empty) and a text (visible when image_url is empty, or always, if you want a caption).
3. On click of the item: change variable value selectedId = item id, then trigger a component event like “change” with the selected id so the parent page can react.
4. For the selected look, add a state or a conditional style on the item: border/background when selectedId === item id.
5. Expose selectedId as the component’s value so you can bind it in forms like a normal input.
For basic accessibility, set the item’s tag to button (or add role=“radio” and aria-checked bound to the same selected check) so screen readers and Tab focus still work. Arrow-key navigation is the part you’d only really get with a custom coded component.
