Forms consist of at least one section and a footer, which houses one or more actions.
Form sections must contain a header and at least one field.
Form section headers consist of a required title and optional descriptive text. Descriptive text is encouraged, as it may add useful context and help the user avoid errors.
Form sections are vertically spaced 32px apart on mobile, while section on desktop are 48px apart. Individual fields are spaced 24px apart across all breakpoints.
Mobile spacing
Non-mobile spacing
Fields using a multi-column layout are horizontally spaced 16px apart.
A single-column form layout is often the clearest way to display input fields. However, there may be times when a form's container becomes very wide, or a full-width presentation would be oversized relative to the input.
In such cases, a designer may opt for a multi-column field set to accommodate the layout. This is particularly useful when grouping inputs of similar types together or when there is a need to visually organize the form fields more efficiently.
Group identical field types.
Group related and reasonably similar field types.
Do not group visually dissimilar field types.
If layout allows, set a field's width relative to the expected width of its input.
Set a field's width relative to its expected input.
Avoid applying field widths that hide or confuse the user's input.