Forms obtain user data and transmit it to the system to either store the data, produce an action, or both.
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.
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:
|- Between consecutive components||16px||16px|
|- Between non-consecutive components||24px||24px|
|- Between consecutive components: title, fields, section...||24px||16px|
|- Between form title or title + description for next component||48px||32px|
First level sections can be collapsible. Note that second level sections, however, can never be collapsible.
The layout must wrap long section titles.