Multiple choice HTML code

Elements Component Development
1

Hi everyone, I need help understanding how to handle multiple choices in HTML, where I can replace not just a single value like segmented but parts of code.

Maybe I didn’t find the right page or examples :face_with_raised_eyebrow:

In the guide, I only found the switch @if(…) , which works well, but it only gives me two options.

2025-11-06 at 14.48.00

This solution doesn’t work.

the JSON is fine.
{
                    "title": "options",
                    "id": "multiple",
                    "segmented": {
                        "default": {
                            "base": "aaa"
                        },
                        "items": [
                            {
                                "value": "aaa",
                                "title": "Option A"
                            },
                            {
                                "value": "bbb",
                                "title": "Option B"
                            },
                            {
                                "value": "ccc",
                                "title": "Option C"
                            }
                        ]
                    }
                }


HTML with this solution give me error

@if(multiple == 'aaa')
<div class="p-sm text-3xl text-center text-brand-100">
   option A
</div>
@endif

@if(multiple == 'bbb')
<div class="p-sm text-2xl text-left text-green-600">
   option B
</div>
@endif

@if(multiple == 'ccc')
<div class="p-sm text-xl text-right text-red-600">
   option C
</div>
@endif

I didn’t find anything else in the guide. Can someone point me in the right direction?
Thanks!

2

Elements templates don’t support inline conditional expressions like @if(multiple == 'bbb').

Instead, handle your logic in hooks.js and pass the processed values back into the template.

Here’s an example:

const transformHook = (rw) => {
  const { multiple } = rw.props;

  rw.setProps({
    wantsA: multiple === 'aaa',
    wantsB: multiple === 'bbb',
    wantsC: multiple === 'ccc',
  });
};

exports.transformHook = transformHook;

Then, in your template, you can use those props directly:

@if(wantsA)
  A is wanted
@endif

@if(wantsB)
  B is wanted
@endif

@if(wantsC)
  C is wanted
@endif

For more details, check the Hooks.js documentation. Let us know if you need more help :slight_smile:

1 Like
3

Thanks @ben I’ll take a look!

1 Like
4

It works perfectly thanks, now I need to better understand how to handle more complex and nested scenarios like the standard components. I’m checking the guide :grinning_face:

1 Like