Can a Vaadin radio button group be styled as a group of buttons?

Question

Is it possible to style radio buttons in vaadin like a set of buttons and have a button selected be colored?

I wish to use a button group like radio buttons. One item can be checked, and the others cannot be checked.

Answer 1

Assuming Vaadin 23 (the structure of components may change in other versions), seems feasible.

In global styles.css, add:

vaadin-radio-group.buttons vaadin-radio-button {
    border: 1pt solid black;
    border-radius: 4px;
    --radio-button-wrapper-display: none;
}

vaadin-radio-group.buttons vaadin-radio-button[checked] {
    background: orange;
}

In theme component/vaadin-radio-button.css, add

.vaadin-radio-button-wrapper { display: var(--radio-button-wrapper-display,block); }

(This will hide the radio circle, but you can still select it by clicking on the label that is still visible)

and set the RadioButtonGroup class to buttons.