The Form is designed to hold form content. The Form itself aggregates FormContainers
.
The FormContainers
are used to separate the form content into different blocks.
A FormContainers
can be seen as a panel. It can have a title and and expander.
Inside the FormContainers
there is an aggregation of FormElements
.
A FormElements
is an aggregation of some form content (TextFields
, CheckBoxes
)
and its label. So the assignment of the label to the control is done automatically by the FormElements
.
The Form itself has no rendering which means that a FormLayout
must be added to the form in order to see any of the
content as it is used for the visualization and user interaction of the
Form. This enables the Form to be shown in different ways by just changing
the FormLayout
.
In order to achieve the difference in rendering, LayoutData
has to be set.
It is possible to change the layout mechanisms for content individually by
assigning VariantLayoutData
to the specific content element.
One way to use this pattern would be to define several layouts and assign
them to the form on the fly, this way it is possible to switch between
layouts as a reaction to an event (e.g. resize) or toggle between different
layouts on user request.
The Form
supports a Navigation Mode and an Edit Mode for Keyboard Navigation. If you enter a Form you are within the Navigation Mode.
If typing is started within a TextField for example it is switched to Edit Mode which means that the arrow keys are navigating within the text.
At the end of the Text pressing an Arrow key would mean that the next Field gets selected and it is switched to Navigation Mode again.
If you would like to switch between Edit and Navigation Mode from within a Field you can press “F2”. The Navigation Mode of the Form supports
the following Keyboard Shortcuts:
A simple Form with a ResponsiveLayout. Use the button to switch the used Layout