radiobuttons layout

Hi,

I need RadioButtonGroup to place radio buttons in two rows (2x2 or 3x2). How can I achieve this? I thought of making my own component with RadioButtons, but RadioButton is not public class. I am left with option to simulate radio buttons with checkboxes, but it seems overkill … can you suggest any other workarounds or solution to this problem?

You could try to use css and change the layouting of the radio button group to be a flex container that wraps

I tried that … it’s not working. :confused:

i could try with multiple vertical radiobuttongroups … each radiobuttongroup with two items, and programatically deselect all when one radiobutton is clicked

RadioButtonGroup as such is really not intended to be a layout component.

The option to use component for items is more about providing “rich labels” than actual layout

But are you trying to achieve this?
image.png

RadioButtonGroup radios = new RadioButtonGroup<>();
radios.setItems(“One”,“Two”,“Three”,“Foir”,“Five”,“Six”,“Seven”,“Eight”,“Nine”);
radios.addClassName(“rows”);
add(radios);

And CSS

.rows {
width: 300px;
}

.rows > vaadin-radio-button {
width: 100px;
}

Yes, but in two rows max … i used your css and it gives me buttons in one row only …

i resolved this problem by creating multiple radiogroups with two items in each group … if i find other (Vaadin) solution for this, i will be glad to remove my “ugly workaround”

Btw … the same problem is with CheckBoxGroup, but here we have public component Checkbox which I can add to custom gridlayout of 2x2