FormLayout
is the default layout of a
Form
component. It lays the form fields and their
captions out in two columns, with optional indicators for required fields and
errors that can be shown for each field.
A Form
handles additional layout elements
itself, including a caption, a form description, a form error indicator,
a footer that is often used for buttons and a border. For more
information on these, see Section 5.19, “Form
”.
The field captions can have an icon in addition to the text.
// A FormLayout used outside the context of a Form FormLayout fl = new FormLayout(); // Make the FormLayout shrink to its contents fl.setSizeUndefined(); TextField tf = new TextField("A Field"); fl.addComponent(tf); // Mark the first field as required tf.setRequired(true); tf.setRequiredError("The Field may not be empty."); TextField tf2 = new TextField("Another Field"); fl.addComponent(tf2); // Set the second field straing to error state with a message. tf2.setComponentError( new UserError("This is the error indicator of a Field."));
The resulting layout will look as follows. The error message shows in a tooptip when you hover the mouse pointer over the error indicator.
.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 FormLayout
has the
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
v-formlayout-captioncell
,
v-formlayout-errorcell
, and
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 Section 6.12.3, “Layout Cell Spacing” and Section 6.12.4, “Layout Margins”.