How to implement multiple sections inside Vaadin Form component


I am looking for a way to implement the layout like this website using Vaadin Form:
Basically I have a Person Bean, it has a lot of properties, can be divided into several logical groups.
When I use a Vaadin form to edit it, I need to express this kind of logical groups in the form layout.

I’m pretty new for Vaadin, previously I have using JSF for a while, but I have to say I really hate it, that’s why I am looking for a new framework for our next project I’m really interested in Vaadin, especially for its architecture (event-listener mechanism) and well-designed data model.
But I’m still struggling with Vaadin’s layout control.

Thanks in advance.

Hi Oliver,

take a look to
book example it will be usefull for you.



Thanks, Javier.
That’s what I am really looking for.
I don’t realize there’s another demo site for Vaadin.:smiley:
It really took a while for me to fully understand the form API in Vaadin.

Best wishes,


You might also want to take a look at FormBinder add-on. With it you can fully separate Form’s layout. Then you can modify the layout as you wish (even with Eclipse plugin’s wysiwyg editor), but Form will still cleanly do its most essential job (bind Item to fields and e.g. handle validation and commits).

The add-on has got rather average rating atm. but I’d say it is one of the best things I’ve invented lately.