Form Layout Styling

Styling API reference for the Form Layout component.

Style Properties
CSS Selectors

Style Properties

The following style properties can be used in CSS stylesheets to customize the appearance of this component.

To apply values to these properties globally in your application UI, place them in a CSS block using the html {…} selector. See Component Style Properties for more information on style properties.

Feature CSS Property Flow API

Feature	CSS Property	Flow API
Spacing between columns	`--vaadin-form-layout-column-spacing`	`setColumnSpacing`
Spacing between rows	`--vaadin-form-layout-row-spacing`	`setRowSpacing`

Spacing between columns

--vaadin-form-layout-column-spacing

setColumnSpacing

Spacing between rows

--vaadin-form-layout-row-spacing

setRowSpacing

Side Labels

The following style properties and Flow methods can be used to customize the width of labels and the spacing between them and the fields in label-aside mode:

Feature CSS Property Flow API

Feature	CSS Property	Flow API
Side label width	`--vaadin-form-layout-label-width`	`setLabelWidth`
Spacing between side label and field	`--vaadin-form-layout-label-spacing`	`setLabelSpacing`

Side label width

--vaadin-form-layout-label-width

setLabelWidth

Spacing between side label and field

--vaadin-form-layout-label-spacing

setLabelSpacing

Open in a
new tab

Source code

FormLayoutLabelStyling.javapackage com.vaadin.demo.component.formlayout;

import com.vaadin.flow.component.formlayout.FormLayout;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.textfield.EmailField;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;

@Route("form-layout-label-styling")
public class FormLayoutLabelStyling extends Div {

    public FormLayoutLabelStyling() {
        // tag::snippet[]
        FormLayout formLayout = new FormLayout();
        formLayout.setAutoResponsive(true);
        formLayout.setLabelsAside(true);
        formLayout.addFormItem(new TextField(), "First name");
        formLayout.addFormItem(new TextField(), "Last name");
        formLayout.addFormItem(new EmailField(), "Email address");

        formLayout.setLabelWidth("10em");
        formLayout.setLabelSpacing("2em");
        // end::snippet[]

        add(formLayout);
    }

}
form-layout-label-styling.tsximport React from 'react';
import { EmailField, FormItem, FormLayout, TextField } from '@vaadin/react-components';

function Example() {
  // tag::snippet[]
  return (
    <FormLayout
      autoResponsive
      labelsAside
      style={{
        '--vaadin-form-layout-label-width': '10em',
        '--vaadin-form-layout-label-spacing': '2em',
      }}
    >
      <FormItem>
        <label slot="label">First name</label>
        <TextField />
      </FormItem>
      <FormItem>
        <label slot="label">Last name</label>
        <TextField />
      </FormItem>
      <FormItem>
        <label slot="label">Email address</label>
        <EmailField />
      </FormItem>
    </FormLayout>
  );
  // end::snippet[]
}

form-layout-label-styling.tsimport '@vaadin/form-layout';
import '@vaadin/form-layout/vaadin-form-item.js';
import '@vaadin/text-field';
import '@vaadin/email-field';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('form-layout-label-styling')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    // tag::snippet[]
    return html`
      <vaadin-form-layout
        auto-responsive
        labels-aside
        style="
          --vaadin-form-layout-label-width: 10em;
          --vaadin-form-layout-label-spacing: 2em;
        "
      >
        <vaadin-form-item>
          <label slot="label">First name</label>
          <vaadin-text-field></vaadin-text-field>
        </vaadin-form-item>
        <vaadin-form-item>
          <label slot="label">Last name</label>
          <vaadin-text-field></vaadin-text-field>
        </vaadin-form-item>
        <vaadin-form-item>
          <label slot="label">Email address</label>
          <vaadin-email-field></vaadin-email-field>
        </vaadin-form-item>
      </vaadin-form-layout>
    `;
    // end::snippet[]
  }
}

Form Item

Property Supported by

Property	Supported by
`--vaadin-input-field-label-color`	Aura, Lumo
`--vaadin-input-field-label-font-size`	Aura, Lumo
`--vaadin-input-field-label-font-weight`	Aura, Lumo
`--vaadin-input-field-label-line-height`	Aura
`--vaadin-form-item-label-color`	Aura (deprecated, use `--vaadin-input-field-label-color` instead)
`--vaadin-form-item-label-font-size`	Aura (deprecated, use `--vaadin-input-field-label-font-size` instead)
`--vaadin-form-item-label-font-weight`	Aura (deprecated, use `--vaadin-input-field-label-font-weight` instead)
`--vaadin-form-item-label-line-height`	Aura (deprecated, use `--vaadin-input-field-label-line-height` instead)

--vaadin-input-field-label-color

Aura, Lumo

--vaadin-input-field-label-font-size

Aura, Lumo

--vaadin-input-field-label-font-weight

Aura, Lumo

--vaadin-input-field-label-line-height

Aura

--vaadin-form-item-label-color

Aura (deprecated, use --vaadin-input-field-label-color instead)

--vaadin-form-item-label-font-size

Aura (deprecated, use --vaadin-input-field-label-font-size instead)

--vaadin-form-item-label-font-weight

Aura (deprecated, use --vaadin-input-field-label-font-weight instead)

--vaadin-form-item-label-line-height

Aura (deprecated, use --vaadin-input-field-label-line-height instead)

CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the Styling documentation for more details on how to style components.

Important

Not for Shadow DOM

These selectors should be used in styles.css or another stylesheet loaded with the @StyleSheet annotation or the @import CSS rule. They do not work in the shadow DOM of Vaadin components, such as in stylesheets in the components sub-folder or loaded with the @CssImport annotation’s themeFor property.

Form Layout: vaadin-form-layout
Form Row: vaadin-form-row
Form Item: vaadin-form-item
Form Item Label: vaadin-form-item::part(label)
Form Item Label Text: vaadin-form-item > label
Form Item Required Indicator: vaadin-form-item::part(required-indicator)
Form Item with Required Field: vaadin-form-item[required]

Docs

Docs

Form Layout Styling

Style Properties

Side Labels

Form Item

CSS Selectors