Class FormLayout
- All Implemented Interfaces:
AttachNotifier
,ClickNotifier<FormLayout>
,DetachNotifier
,HasComponents
,HasElement
,HasEnabled
,HasSize
,HasStyle
,Serializable
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 ClassesModifier and TypeClassDescriptionstatic class
Server-side component for the<vaadin-form-item>
element.static class
A class used in describing the responsive layouting behavior of aFormLayout
. -
Constructor Summary
ConstructorsConstructorDescriptionConstructs an empty layout.FormLayout
(Component... components) Constructs a FormLayout with the given initial components. -
Method Summary
Modifier and TypeMethodDescriptionvoid
Adds a component with the desired colspan.addFormItem
(Component field, 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.addFormItem
(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
(Component component) Gets the colspan of the given component.Get the width of side-positioned label.Get the list ofFormLayout.ResponsiveStep
s used to configure this layout.void
setColspan
(Component component, int colspan) Sets the colspan of the given component's element.void
setLabelWidth
(String width) Set the width of side-positioned label.void
setResponsiveSteps
(FormLayout.ResponsiveStep... steps) Configure the responsive steps used in this layout.void
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 withHasComponents.add(Component...)
. -
FormLayout
Constructs a FormLayout with the given initial components. Additional components can be added after construction withHasComponents.add(Component...)
.- Parameters:
components
- the components to add- See Also:
-
-
Method Details
-
setColspan
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 withadd(Component, int)
.- Parameters:
component
- the component to set the colspan for, notnull
colspan
- the desired colspan for the component
-
add
Adds a component with the desired colspan. This method is a shorthand for callingHasComponents.add(Component...)
andsetColspan(Component, int)
- Parameters:
component
- the component to addcolspan
- the desired colspan for the component
-
getColspan
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
Get the list ofFormLayout.ResponsiveStep
s used to configure this layout.- Returns:
- the list of
FormLayout.ResponsiveStep
s used to configure this layout - See Also:
-
setResponsiveSteps
Configure the responsive steps used in this layout.- Parameters:
steps
- list ofFormLayout.ResponsiveStep
s to set- See Also:
-
setResponsiveSteps
Configure the responsive steps used in this layout.- Parameters:
steps
- theFormLayout.ResponsiveStep
s to set- See Also:
-
addFormItem
Convenience method for creating and adding a new FormItem to this layout that wraps the given field with a label. Shorthand foraddFormItem(field, new Label(label))
.- Parameters:
field
- the field component to wraplabel
- the label text to set- Returns:
- the created form item
- See Also:
-
addFormItem
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 wraplabel
- the label component to set- Returns:
- the created form item
-
setLabelWidth
Set the width of side-positioned label.- Parameters:
width
- the value and CSS unit as a string- See Also:
-
getLabelWidth
Get the width of side-positioned label.- Returns:
- the value and CSS unit as a string
- See Also:
-