Package com.vaadin.flow.component.formlayout

Class FormLayout

java.lang.Object
com.vaadin.flow.component.Component
com.vaadin.flow.component.formlayout.FormLayout
All Implemented Interfaces:
com.vaadin.flow.component.AttachNotifier, com.vaadin.flow.component.ClickNotifier<FormLayout>, com.vaadin.flow.component.DetachNotifier, com.vaadin.flow.component.HasComponents, com.vaadin.flow.component.HasElement, com.vaadin.flow.component.HasEnabled, com.vaadin.flow.component.HasSize, com.vaadin.flow.component.HasStyle, Serializable
@Tag("vaadin-form-layout") @NpmPackage(value="@vaadin/polymer-legacy-adapter",version="24.2.0") @NpmPackage(value="@vaadin/form-layout",version="24.2.0") @JsModule("@vaadin/polymer-legacy-adapter/style-modules.js") @JsModule("@vaadin/form-layout/src/vaadin-form-layout.js") public class FormLayout extends com.vaadin.flow.component.Component implements com.vaadin.flow.component.HasSize, com.vaadin.flow.component.HasStyle, com.vaadin.flow.component.HasComponents, com.vaadin.flow.component.ClickNotifier<FormLayout>
Form Layout allows you to build responsive forms with multiple columns and to position input labels on top or to the side of the input. Form Layout has two columns by default meaning it displays two input fields per line. When the layout width is smaller it adjusts to a single column layout.

You can define how many columns Form Layout should use based on the screen width. A single column layout is preferable to a multi column one. A multi column layout is more prone to cause confusion and to be misinterpreted by the user. However, closely related fields can be placed in line without issue. For example, first and last name, address fields such as postal code and city, as well as ranged input for dates, time, currency, etc.

Best Practices:
Longer forms should be split into smaller, more manageable and user-friendly sections using subheadings, Tabs, Details or separate views when possible. Each section should consist of related content and/or fields.

Also, use the following guidelines for Button placement in forms:

  • Buttons should be placed below the form they’re associated with.
  • Buttons should be aligned left.
  • Primary action first, followed by other actions, in order of importance.
Author:
Vaadin Ltd
See Also:

  • Nested Class Summary

    Nested Classes
    Modifier and Type
    Class
    Description
    static class 
    FormLayout.FormItem
    Server-side component for the <vaadin-form-item> element.
    static class 
    FormLayout.ResponsiveStep
    A class used in describing the responsive layouting behavior of a FormLayout.

  • Constructor Summary

    Constructors
    Constructor
    Description
    FormLayout()
    Constructs an empty layout.
    FormLayout(com.vaadin.flow.component.Component... components)
    Constructs a FormLayout with the given initial components.

  • Method Summary

    Modifier and Type
    Method
    Description
    void
    add(com.vaadin.flow.component.Component component, int colspan)
    Adds a component with the desired colspan.
    FormLayout.FormItem
    addFormItem(com.vaadin.flow.component.Component field, com.vaadin.flow.component.Component label)
    Convenience method for creating and adding a new FormItem to this layout that wraps the given field with a component as its label.
    FormLayout.FormItem
    addFormItem(com.vaadin.flow.component.Component field, String label)
    Convenience method for creating and adding a new FormItem to this layout that wraps the given field with a label.
    int
    getColspan(com.vaadin.flow.component.Component component)
    Gets the colspan of the given component.
    List<FormLayout.ResponsiveStep>
    getResponsiveSteps()
    Get the list of FormLayout.ResponsiveSteps used to configure this layout.
    void
    setColspan(com.vaadin.flow.component.Component component, int colspan)
    Sets the colspan of the given component's element.
    void
    setResponsiveSteps(FormLayout.ResponsiveStep... steps)
    Configure the responsive steps used in this layout.
    void
    setResponsiveSteps(List<FormLayout.ResponsiveStep> steps)
    Configure the responsive steps used in this layout.

    Methods inherited from class com.vaadin.flow.component.Component

    addListener, findAncestor, fireEvent, from, get, getChildren, getElement, getEventBus, getId, getListeners, getLocale, getParent, getTranslation, getTranslation, getTranslation, getTranslation, getTranslation, getTranslation, getUI, hasListener, isAttached, isTemplateMapped, isVisible, onAttach, onDetach, onEnabledStateChanged, removeFromParent, scrollIntoView, scrollIntoView, set, setElement, setId, setVisible

    Methods inherited from class java.lang.Object

    clone, equals, finalize, getClass, hashCode, notify, notifyAll, toString, wait, wait, wait

    Methods inherited from interface com.vaadin.flow.component.AttachNotifier

    addAttachListener

    Methods inherited from interface com.vaadin.flow.component.ClickNotifier

    addClickListener, addClickShortcut, addDoubleClickListener, addSingleClickListener

    Methods inherited from interface com.vaadin.flow.component.DetachNotifier

    addDetachListener

    Methods inherited from interface com.vaadin.flow.component.HasComponents

    add, add, add, addComponentAsFirst, addComponentAtIndex, remove, remove, removeAll

    Methods inherited from interface com.vaadin.flow.component.HasElement

    getElement

    Methods inherited from interface com.vaadin.flow.component.HasEnabled

    isEnabled, setEnabled

    Methods inherited from interface com.vaadin.flow.component.HasSize

    getHeight, getHeightUnit, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getWidth, getWidthUnit, setHeight, setHeight, setHeightFull, setMaxHeight, setMaxHeight, setMaxWidth, setMaxWidth, setMinHeight, setMinHeight, setMinWidth, setMinWidth, setSizeFull, setSizeUndefined, setWidth, setWidth, setWidthFull

    Methods inherited from interface com.vaadin.flow.component.HasStyle

    addClassName, addClassNames, getClassName, getClassNames, getStyle, hasClassName, removeClassName, removeClassNames, setClassName, setClassName

  • Constructor Details

    • FormLayout

      public FormLayout()
      Constructs an empty layout. Components can be added with HasComponents.add(Component...).

    • FormLayout

      public FormLayout(com.vaadin.flow.component.Component... components)
      Constructs a FormLayout with the given initial components. Additional components can be added after construction with HasComponents.add(Component...).
      Parameters:
      components - the components to add
      See Also:
      • HasComponents.add(Component...)

  • Method Details

    • setColspan

      public void setColspan(com.vaadin.flow.component.Component component, int colspan)
      Sets the colspan of the given component's element. Will default to 1 if an integer lower than 1 is supplied. You can directly add components with the wanted colspan with add(Component, int).
      Parameters:
      component - the component to set the colspan for, not null
      colspan - the desired colspan for the component

    • add

      public void add(com.vaadin.flow.component.Component component, int colspan)
      Adds a component with the desired colspan. This method is a shorthand for calling HasComponents.add(Component...) and setColspan(Component, int)
      Parameters:
      component - the component to add
      colspan - the desired colspan for the component

    • getColspan

      public int getColspan(com.vaadin.flow.component.Component component)
      Gets the colspan of the given component. If none is set, returns 1.
      Parameters:
      component - the component whose colspan is retrieved
      Returns:
      the colspan of the given component or 1 if none is set

    • getResponsiveSteps

      public List<FormLayout.ResponsiveStep> getResponsiveSteps()
      Get the list of FormLayout.ResponsiveSteps used to configure this layout.
      Returns:
      the list of FormLayout.ResponsiveSteps used to configure this layout
      See Also:

    • setResponsiveSteps

      public void setResponsiveSteps(List<FormLayout.ResponsiveStep> steps)
      Configure the responsive steps used in this layout.
      Parameters:
      steps - list of FormLayout.ResponsiveSteps to set
      See Also:

    • setResponsiveSteps

      public void setResponsiveSteps(FormLayout.ResponsiveStep... steps)
      Configure the responsive steps used in this layout.
      Parameters:
      steps - the FormLayout.ResponsiveSteps to set
      See Also:

    • addFormItem

      public FormLayout.FormItem addFormItem(com.vaadin.flow.component.Component field, String label)
      Convenience method for creating and adding a new FormItem to this layout that wraps the given field with a label. Shorthand for addFormItem(field, new Label(label)).
      Parameters:
      field - the field component to wrap
      label - the label text to set
      Returns:
      the created form item
      See Also:

    • addFormItem

      public FormLayout.FormItem addFormItem(com.vaadin.flow.component.Component field, com.vaadin.flow.component.Component label)
      Convenience method for creating and adding a new FormItem to this layout that wraps the given field with a component as its label.
      Parameters:
      field - the field component to wrap
      label - the label component to set
      Returns:
      the created form item