On This Page
A form layout layouts children in columns.
- Fluent
- Declarative
FormLayout.builder()
.content(List.of(
FormRow.builder()
.content(List.of(
FormField.builder()
.dataType(FieldDataType.string)
.label("Name")
.build(),
FormField.builder()
.dataType(FieldDataType.integer)
.label("Age")
.build(),
FormField.builder()
.dataType(FieldDataType.bool)
.label("Registered")
.build()
))
.build()
))
.autoResponsive(true)
.maxColumns(2)
.build()
@FormColumns(2)
class MyForm {
String name;
int age;
boolean registered;
}
Available properties
This is the list of available properties for a form layout:
| Property | Description | Notes |
|---|---|---|
| id | id for this component | |
| cssClasses | list of css classes | content of the css attribute |
| style | inline style attributes | content of the style attribute |
| autoResponsive | to make the form responsive according to columns width | true/false |
| labelsAside | to place the labels at left, inside top of field | true/false |
| fullWidth | shortcut to set width:100% | true/false |
| columnWidth | column width | px, em, rem, … |
| expandColumns | expand columns | true/false |
| expandFields | expand fields | true/false |
| maxColumns | max columns in a row | number |
| responsiveSteps | fine grained responsive steps | look at Vaadin doc |
| columnSpacing | space between columns | px, em, rem, … |
| rowSpacing | space between rows | px, em, rem, … |
| labelSpacing | space between label and row | px, em, rem, … |
You can see a full explanation of those properties at https://vaadin.com/docs/latest/components/form-layout