Docs

Docs

Form Layout

Form Layout allows you to build responsive forms with multiple columns.

You can position input labels above or to the side of the input.

<FormLayout
  responsiveSteps={[
    // Use one column by default
    { minWidth: 0, columns: 1 },
    // Use two columns, if layout's width exceeds 500px
    { minWidth: "500px", columns: 2 },
  ]}
>
  <TextField label="First name"></TextField>
  <TextField label="Last name"></TextField>
  <TextField label="Username" colspan="2"></TextField>
  <PasswordField label="Password"></PasswordField>
  <PasswordField label="Confirm password"></PasswordField>
</FormLayout>

Label Position

The built-in labels of input fields are positioned above the input. Form Layout supports side-positioned labels, provided they’re wrapped in Form Items and the label position is set to aside.

Generally, the only reason for wrapping labels in Form Items is to put the labels to the side of the input.

<FormLayout>
  <FormItem>
    <label slot="label">Revenue</label>
    <TextField>
      <span slot="suffix">EUR</span>
    </TextField>
  </FormItem>
  <FormItem>
    <label slot="label">Expenses</label>
    <TextField>
      <span slot="suffix">EUR</span>
    </TextField>
  </FormItem>
  <FormItem>
    <label slot="label">Invoices</label>
    <TextField>
      <span slot="suffix">EUR</span>
    </TextField>
  </FormItem>
</FormLayout>
Important
 You can find more information in the corresponding article on vaadin.com.