Basic Usage

Any content can be used in the <vaadin-form-item> element. For instance, you can add multiple input elements with surrounding text. The label can be any element:

Note: in order to make <textarea> vertically aligned with the <vaadin-form-item> label, add textarea { vertical-align: top; display: inline-flex; } to your CSS.

The label is optional and can be omitted:

Single Column

Custom Responsive Steps

Spanning Items on Multiple Columns

Explicit New Row

Custom CSS Properties

The following custom CSS properties are supported in <vaadin-form-layout>:

CSS Property	Description	Default
--vaadin-form-layout-column-gap	Length of the gap between columns	2em

Additionaly, <vaadin-form-item> supports:

CSS Property	Description	Default
--vaadin-form-item-label-width	Width of the label column when the labels are aside	8em
--vaadin-form-item-label-gap	Length of the gap between the label and input columns when the labels are aside	1em

Vaadin Text Fields as Form Items

Paper Inputs as Form Items