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. |