Overview

Forms are conjunctions of elements designed for collecting information from the user.

A basic form.

A basic form.

 

Form Anatomy


Our forms are divided into five main elements; you can learn more about them in the next section of this documentation:

Our basic form anatomy.

Our basic form anatomy.

  1. Form Header: A form's header is crucial for a positive and accessible user experience. The title and description provide a clear purpose and help users decide if the form is relevant.
  2. Fieldset: A group of form controls that are semantically related.
  3. Form Field: The fundamental element of a form consisting of an input, its label, and helper text if needed
  4. Form Footer: The last part of a form, the CTAs for submission and cancellation, should always be here.

 

Styling


Spacing

Horizontal margins

We recommend having a minimum horizontal margin of 24px (forms-margin).

Our form’s horizontal margins.

Our form’s horizontal margins.

Vertical margins

We recommend having a minimum vertical margin of 32px (forms-formBody-paddingBottom) between the last input of the form and the form footer

The recommended gap between the last form control of the form and its footer.

The recommended gap between the last form control of the form and its footer.

 

Sizing

Max Width

We recommend having a max form width of 600px (forms-maxWidth). Otherwise, the inputs will stretch to a point where the user will have trouble looking at them, especially if they’re stacked vertically.

The recommended max width of a form.

The recommended max width of a form.