---
title: FormLayout
order: 5
layout: page
---

[[layout.formlayout]]
= FormLayout

ifdef::web[]
[.sampler]
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/layout/form-layout"]
endif::web[]

[classname]#FormLayout# lays the components and their captions out in two
columns, with optional indicators for required fields and errors that can be
shown for each field. The field captions can have an icon in addition to the
text. [classname]#FormLayout# is an ordered layout and much like
[classname]#VerticalLayout#. For description of margins, spacing, and other
features in ordered layouts, see
<<layout-orderedlayout#layout.orderedlayout, "VerticalLayout and HorizontalLayout">>.

The following example shows typical use of [classname]#FormLayout# in a form:


[source, java]
----
FormLayout form = new FormLayout();
TextField tf1 = new TextField("Name");
tf1.setIcon(VaadinIcons.USER);
tf1.setRequiredIndicatorVisible(true);
form.addComponent(tf1);

TextField tf2 = new TextField("Street address");
tf2.setIcon(VaadinIcons.ROAD);
form.addComponent(tf2);

TextField tf3 = new TextField("Postal code");
tf3.setIcon(VaadinIcons.ENVELOPE);
form.addComponent(tf3);
// normally comes from validation by Binder
tf3.setComponentError(new UserError("Doh!"));
----

The resulting layout will look as follows. The error message shows in a tooltip
when you hover the mouse pointer over the error indicator.

[[figure.layout.formlayout]]
.A [classname]#FormLayout# Layout for Forms
image::img/formlayout-example1.png[width=50%, scaledwidth=70%]

[[layout.formlayout.css]]
== CSS Style Rules


[source, css]
----
.v-formlayout {}
.v-formlayout .v-caption {}

/* Columns in a field row. */
.v-formlayout-contentcell {} /* Field content. */
.v-formlayout-captioncell {} /* Field caption. */
.v-formlayout-errorcell {}   /* Field error indicator. */

/* Overall style of field rows. */
.v-formlayout-row {}
.v-formlayout-firstrow {}
.v-formlayout-lastrow {}

/* Required field indicator. */
.v-formlayout .v-required-field-indicator {}
.v-formlayout-captioncell .v-caption
        .v-required-field-indicator {}

/* Error indicator. */
.v-formlayout-cell .v-errorindicator {}
.v-formlayout-error-indicator .v-errorindicator {}
----

The top-level element of [classname]#FormLayout# has the
[literal]#++v-formlayout++# style. The layout is tabular with three columns: the
caption column, the error indicator column, and the field column. These can be
styled with [literal]#++v-formlayout-captioncell++#,
[literal]#++v-formlayout-errorcell++#, and
[literal]#++v-formlayout-contentcell++#, respectively. While the error indicator
is shown as a dedicated column, the indicator for required fields is currently
shown as a part of the caption column.

For information on setting margins and spacing, see also
<<layout-orderedlayout#layout.orderedlayout.spacing,"Spacing
in Ordered Layouts">> and
<<layout-settings#layout.settings.margins, "Layout Margins">>.