Question - How can I dynamically render a component as a Radio button on desktop (wide screen) and as a Dropdown on mobile screens

[Dev-Trilok]

Hello @travist @randallknutson I'm looking for a component that can handle a series of rows containing radio buttons. On a wide enough screen, I would like the layout to be compact, with multiple rows displayed side by side. However, when the screen width falls below a certain threshold, I want each row to be displayed with the row label taking up the full width, and the radio buttons replaced with either a dropdown or a stacked series of radio buttons. on large screen

it would look on a small screen like:

Is it possible to create a custom component that can achieve this dynamic render different component based on the screen size? Thanks

[travist]

Absolutely this can be done with a custom component.... It actually may even be able to be accomplished by editing the radio template to turn into a select on smaller screens. Here are some docs on how to do that.

https://help.form.io/developers/form-development/form-templates#overriding-templates