i’m recently new to Vaadin, and I have a problem with an OptionGroup.

I want to put each radio button of an OptionGroup in different cells in a GridLayout.
Is there any way I can do that ?

Thanks in advance!

There isn’t really a way to do that.

You can make an OptionGroup horizontal by setting “display: inline-block” in CSS for the element (KB:
the Book

If you want the options to span multiple lines, you can leave out the “white-space: nowrap”, but then it could wrap between a radio button and its caption, so it’s not really good.

Thank you for your fast answer.

What i’m trying to do, is to associate on a OptionGroup with a TextField.

So, foreach OptionGroup, I want a row like this : OptiongGoup, OptionGroup.ItemCaption and TextField.

Is there a way to do that, or i must think of another layout ?


Sorry, I don’t understand what you want.

The OptionGroup component is an atomic entity, and you cannot tweak its layout much without client side changes.

What I would recommend trying is not to use a single OptionGroup but implement the functionality yourself by having one-item OptionGroups and TextFields in a GridLayout. Then you should be able to manage the selection on the server side so that you deselect the other options when one of the OptionGroups is clicked.

Thanks for your quick answer.


I resolved this (for now) with css and a Grid Layout.

I’ts not perfectly fine, but it’s works


I just release a Vaadin add-on called
. It allows to layout OptionGroup check boxes or radio buttons freely.