Forms

Forms obtain user data and transmit it to the system to either store the data, produce an action, or both.

Parts

1. Title (Required)
2. Description (Not required but very useful). It should describe the form usage.
3. Form Elements:
   1. Text input. See text input for more information.
   2. Text input localizable. See text input localizable for more information.
   3. Selector. See selectors for more information.
   4. Radio button. See checkbox, radio, and toggle for more information
   5. Checkbox. See checkbox, radio, and toggle for more information.
4. Section. Sections are identified with a 14px size primary text that is always in uppercase letters. Some forms may require a full width underline for a better visual separation of content. This is usually used in configuration forms.
5. Buttons. Visit Actions to learn how buttons are used in forms.

Layout

Forms can occupy one or two columns. If your form is divided into several sections that are stacked, it's best to keep the internal layout between sections. This can affect the experience of filling the whole form. When adding columns, remember that the reading direction for each column is left to right and top to bottom. The user reads column one first, then they read column two.

One single form

Two columns form

Attributes

Spacing

It's very important to maintain the distance between form elements, such as texts, fields, sections, etc. Please see our hierarchy page for guidance.

As a general rule of thumb, use the following distances for spacing between form elements:

Title

Sections

First level sections can be collapsible. Note that second level sections, however, can never be collapsible.

The layout must wrap long section titles.

Paragraph