How to have 2 fields side by side in a form?

Right now all my fields are aligned vertically, one by one on a Form. I want to put 2 fields side by side since they are related to each other. I tried using Horizontal Layout but it does not work.

Do you know how?


The old Form component uses FormLayout as its default layout, which indeed can not display components horizontally. You can use setLayout() to set another layout component as its layout. In such case, you may need to handle adding the field components differently, at least if you are mixing different layout components.

However, the Form component is outdated and deprecated in Vaadin 7. You should use FieldGroup instead, as it allows much greated flexibility in building the form layout.

The horizontally laid out layout components are HorizontalLayout, GridLayout, and CssLayout.

Do you have any example of using FieldGroup to build a form layout? I have Text Field, Drop Down List, Multi-Select list, Radio Buttons on my form.

The basic FieldGroup are
in the book section
and there’s
some more here
. The examples are very basic – to show how to use FieldGroup, not about building complex layouts.

With list components, including the OptionGroup for radio buttons, you just have to remember that their “value” is the item ID of the currently selected item. And item ID is not the same as the item itself or the visible item caption, although it can be used for that purpose.