Vertical spacing between radio buttons

Flow
1

Hi All,

I’m new to Vaadin. I’m not quite sure how to increase the vertical spacing between radio buttons. I know it must do with css, but I’m not sure how to apply it.

Thanks!

2

You need selector targeting the slotted radio buttons in the group.

In your Java class use

@CssImport(value = "./styles/radio-button-styles.css", themeFor = "vaadin-radio-button-group")

...

radioButtonGroup.getElement().setAttribute("theme","button-spacing");

In file “frontend/styles/radio-button-styles.css” you need to have

:host([theme~="button-spacing"]
) ::slotted(vaadin-radio-button) {
    ... add button spacing css here ...
}
3

Hi Tatu,

Thanks for the tip!