Install

Maven

Single:

<dependency>
    <groupId>de.mate_ds</groupId>
    <artifactId>mate-form-flow</artifactId>
</dependency>
<dependency>
    <groupId>de.mate_ds</groupId>
    <artifactId>mate-flex-layout-flow</artifactId>
</dependency>

For installing all at once see bundles (recommended way)

Import

import de.mate_ds.flow.component.form.Form;
import de.mate_ds.flow.component.flexlayout.FormLayout;
import com.vaadin.flow.component.html.H5;
import com.vaadin.flow.component.textfield.EmailField;
import com.vaadin.flow.component.textfield.PasswordField;
import com.vaadin.flow.component.textfield.TextField;
import java.util.stream.Stream;

Variants

Default

Form form = new Form();

FormLayout userSection = new FormLayout();
userSection.setSpacing(true);
userSection.add(new H5("User"), new TextField("First name"), new TextField("Last name"), new TextField("Username"));

FormLayout contactSection = new FormLayout();
contactSection.setSpacing(true);
contactSection.add(new H5("Contact"), new EmailField("E-Mail"), new TextField("Phone"));

FormLayout passwordSection = new FormLayout();
passwordSection.setSpacing(true);
passwordSection.add(new H5("Password"), new PasswordField("Password"), new PasswordField("Confirm password"));

form.add(userSection, contactSection, passwordSection);

Error

Displays a summary of validation errors at the top of the form.

Form form = new Form();
form.setInvalid(true);
form.setErrorTitle("Error title");
form.setErrorItems(Stream.of("This is the first form error", "This is the second form error"));