Well-designed forms are a crucial component of any web application because forms are a critical tool for users to impart information. Forms wrap several types of input such as text inputs, text areas, radio buttons, checkboxes, etc. They should contain a set of actions to help the user either navigate through, leave, or submit the form.
A basic form is a one-column layout with labels on top. Strongly related fields are grouped together on one line. Fields are an appropriate width for the content. To optimize for speed, we recommend starting with a one-column layout.
In some cases, a one-column layout is not the best way to present the form. Use two-column layouts when:
- There are many fields (>=6) on a single screen, and real estate is at a premium
- Specific fields have strong associations
- Speed is not a primary need
Do not use a two-column layout to display one line of fields.
In the Cosmos Design System, only one and two-column layouts are used for basic field design, with the exception of name or address entries.
Some items in a form are more closely associated than others, and the grouping can be made more clear by pairing the fields on the same line. Such fields include:
- First and last name
- Date ranges
- City/state/zip in an address
Use field groups to separate blocks of relevant information in forms. Field groups should contain a concise and logical header to provide an outline of the structure. These groupings can be expanded or collapsed, but should only do so when the data within is seldom needed. Collapsible sections should never be nested.
Required fields should be shown before non-required fields. Having required fields at the beginning of the process ensures that users do not miss them. Avoid mixing a required field among many non-required fields. If a field is strongly recommended (but not "required"), it should be as near to the beginning of the form as possible. This reduces the chance of a user skipping it.
Long and wide fields
When reasonable, put long and wide fields under short ones. If long and wide fields are at the top of a form, they can hide other fields by pushing them below the visible area of a webpage. When possible, put these at the end of your form.
Examples of long and wide fields include:
The default, and recommended, tab order is left > right, top > bottom. This is the recommended tab order because it lays fields out predictably, and groups related fields into one line.
The actions prop content will be rendered at the bottom of the form. It is important to structure the buttons so that the primary action is towards the right, and any secondary actions towards the left.
Banners are an optional prop for forms that will render the provided content at the top of the Form. While this prop can technically take any ReactNode element, we suggest that it be used with the banner component.