Form and sections should be clear and structured, highlight fields and action items, and reduce the chance of the form becoming lost on the screen.
Section off forms using cards or widgets
Place forms flat on the background
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.
- Form 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 submission and cancellation CTAs should always be here.
Styling
Spacing
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
Sizing
Max Width
We recommend a max form width of 960px form_control/form/max_width 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.
960px should be a form max-width, even if the screen goes beyond that.
Adjust the width of the container to fit the input field content properly
Leave the width of the container too small or too wide for its content, leaving the input fields squished or stretched