Docs

Documentation versions (currently viewingVaadin 24)

Fields & Binding

Learn how to compose field components into forms and bind them to Form Data Objects.

Forms are used to display and edit data in UI components called fields. This data comes from a Form Data Object (FDO), which is structured to align with the fields in the form. Each form field typically maps to a corresponding property in the FDO.

FDOs are often fetched from and submitted to an application service for processing, such as validation and persistence. Architecturally, an FDO belongs to the application layer, not the presentation layer.

Important
Entities as Form Data Objects
In simple cases — such as CRUD views and administration screens — the form model and the domain model may be the same. In those cases, you can use your entities as FDOs. However, doing so couples your domain logic to the UI. This can lead to maintainability issues, especially if UI requirements evolve independently of business logic. When that happens, it’s better to introduce a dedicated FDO and handle data conversion in the application service.

Data is exchanged between the form and the FDO through data binding. Typically, each field is bound to a specific property of the FDO. The binding mechanism keeps the form and the FDO in sync.

Tip
Part of a Series
This is part 1 of the Add a Form series.

Both Flow and Hilla have many different field components and offer built-in support for data binding: