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

Use JSON in the <responsive-steps> HTML attribute to specify custom responsive steps for the <vaadin-form-layout> element.

See also: responsiveSteps property in the API Reference.

Alternatively, you can customize the responsive steps by using JavaScript to set the responsiveSteps array property.

Responsive steps can optionally set labelsPosition string option. The following values are supported:

aside

Default value. Labels are positioned aside the input fields.

top

Labels are positioned above the input fields.

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-form-item-row-gap	Height of the gap between the form item elements	1em

Vaadin Text Fields as Form Items

Note: When not using <vaadin-form-item>, vertical gaps between the form rows should be added manually. For example, use CSS to add vertical margin for the <vaadin-text-field> child elements:

Paper Inputs as Form Items

<paper-input> elements have built-in vertical spacing. Adding margins with CSS is unnecessary.