Overview

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

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.

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.

Fieldset: A group of form controls that are semantically related.

Form Field: The fundamental element of a form consisting of an input, its label, and helper text if needed

Form Footer: The last part of a form, the CTAs for submission and cancellation, should always be here.

Styling

This documentation references form tokens. Look at this table to learn more about all the related tokens.

Spacing

Horizontal margins

We recommend having a minimum horizontal margin of 24px (container/lg/padding).

Our form’s horizontal margins.

Vertical margins

We recommend having a minimum vertical margin of 32px (container/xl/padding) 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.

Sizing

Max Width

We recommend a max form width of 960px (form-maxWidth) for regular forms with or without a stepper; otherwise, inputs will stretch to a point where users have trouble viewing them, especially when stacked vertically.