RadioGroupItems options display horizontally, but up to a certain limit

[reneguillot]

Hello experts,

When creating a RadioGroupItem on a web form, there's a property vertical that will display the options either horizontally ("false") or vertically ("true"). But this is always rendered as either one (1) row or column.

I intend to display the options horizontally, but if the number of values (in the valueMap exceeds 4 (or any multiplication of 4) the radio buttons should continue vertically as well.

The use case is that for mobile browsers (who are just limited in usable space in their web browser) I don't want users to need to scroll to the right if you have for example 8 items in the valueMap. It should then simply display the radio buttons in 2 rows of 4 columns each.

Is there a generic solution to this problem description?

Many thanks for your insight.

Kind regards,

Rene Tran-Guillot

[Isomorphic]

You would currently need to use a separate RadioGroupItem per row of options, and use event handlers to ensure there is only a single selection across all of them.

If this is too much of a burden in your application, consider Feature Sponsorship.