Form layout element [💰20]

[jouni]

An element which makes it easy to build common form layouts.

Core features

At minimum, it should provide a way to present field labels/captions on the left side of the field (or right side for RTL languages). When there is not enough horizontal space, the label should be moved on top of the field. The label width should be uniform for all rows in the layout, so that the left (or right on RTL) edge of the fields align. It should be possible to align the labels in the "label column" either left or right (right-aligned being the default perhaps).

It should be possible to layout fields in 2 columns (possibly more in the future if that is seen as a common use case), and some fields can span multiple columns. The columns should also wrap when horizontal space is limited.

It should be possible to divide the overall form into sections using section headers/dividers.

The fields can be any input element, such as text inputs, dropdowns, checkboxes, radio groups, sliders, etc.

The labels could be either "floating" or static. Floating labels probably don’t make much sense for the "column layout" version.

Mockups

Wide layout:

Medium layout:

Narrow layout:

More features

• Required field indicators
• Error indication/messages
  • At first, any field error indicators should be placed underneath the field (like paper-input does for instance). After that, it should be possible to move the error messages to the right side of the field, when the label is on the left side (and vice versa for RTL).
• Help/description messages (similar as error messages, but these are always visible)
• Form level error summary

Inspiration

A proof-of-concept example how required indicators, help/description and error messages could be shown, and how help/description/error messages and floating labels could work when the label is placed on the left side of the field: http://codepen.io/jouni/full/dcrAu/

You can also google for "form layout" to get inspiration.

[joeblew99]

looks very nice @jouni
Looking forward to trying it out

[jouni]

As requested in the team grooming, here’s a mockup of a very minimum we should implement first:

[jouni]

Talked with our internal design team, and was reminded of some important requirements:

• You should be able to specify a label for any arbitrary element/group of fields. So if the component itself doesn’t have a label property/attribute built in (like the upcoming vaadin-input), the developer should be able to define a label that is managed by the form layout.
• The same goes for error messages: if a field component (like vaadin-input) has its own error message, the form layout should be able to “adopt” it. But if the component doesn’t have its own error message, the developer should be able to define one, which the form layout will manage.
• And the same for description messages
• The developer should be able to modify the form layout label template, in order to add icon buttons or other kinds of customizations to it.

[Saulis]

Ping @macjuan ^^ here are some ideas for form layout (should be moved to ProdPad).

[jouni]

Since this element now has its own repo, and it has been split into separate features, I’m closing this one. Please follow the issues/milestones in the https://github.com/vaadin/vaadin-form-layout/ repo.