Form

Introduction

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.

Keyboard Navigation:

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:


Basic Example

A simple Form with a ResponsiveLayout. Use the button to switch the used Layout

API Documentation

See API documentation