Patterns
Field organization
- Form fields should be stacked vertically, as most people are used to a vertical scroll and may not have wide enough screens to fully display horizontally stacked inputs. A good principle to follow is to include only one input per line.
- If stacking form fields vertically would make the app card too long, break the form up into multiple steps so that the content isn’t overwhelming.
Buttons
- Always include a submit button with each form.
- For multi-step forms, include a “Next” button at the bottom of each step to guide users to the next step, with the last step ending with a submit button. See the multi-step form in panels example below.
Examples
The examples below are taken from HubSpot’s design patterns example app and Figma design kit.Forms in modals
View code in GitHub
Multi-step forms
View code in GitHub