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

- 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
Spacing
Horizontal margins
We recommend having a minimum horizontal margin of 24px (forms-margin).

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

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.
