Hi Charles Greenlaw :)

You can use the button group pattern.

https://outsystemsui.outsystems.com/StyleGuidePreview/PatternDetail?MenuCategoryId=7&MenuSubCategorId=3

What I did there was push the button group pattern and I created a static to hold the value of the answers, in this case, you don't have hardcoded values being pulled.

Then you just need a variable that will hold the id of the type of answer selected

Then for each button group item, you just need to assign the respective value

For the style, I need to add this CSS to the theme to be exactly as you want.

.button-group-item:first-child{
    border-radius: 32px var(--border-radius-none) var(--border-radius-none) 32px;
}

.button-group-item:last-child{
border-radius: var(--border-radius-none) 32px 32px var(--border-radius-none);
}

To adjust the space between them and to be responsive I used the columns pattern

And to align the interface I needed to add this class to make it full height of the parent where it is placed and to align to the center using flex.

Check the OML

Regards,

Márcio

Hi Charles Greenlaw ,

Please find the attached oml for sample code.

Hope this helps.

Thanks,

Manish Jawla