A form refers to a group of input fields, that can range from text inputs to selects, each with a label to provide additional context. Many forms elements can be used within sections on a page. They can also be used as data sets within a list where related content is grouped.
Illustration of forms elements on a page.
Demo and Developer Guidelines


Form element anatomy; label, optional description text and the input or select.


Labels are title case without punctuation and contain a single noun or noun phrase (labels do not contain verbs).


Specific behavior for inputs and selects can be found on their individual component pages.



All inputs and selects will have a focus surrounding the field.


Error messages can appear in-line under a form input or select when an error on that field is preventing the form from saving. More information can be found on the Form Error Validation page.

Empty-Read State

Empty states are used when a user opts out of inputing content in the field. This state is visible on a read view. More information can be found on the Form Empty States page.


Horizontal Alignment

In the scenario where multiple form elements are placed horizontally, labels will be bottom aligned to ensure all inputs and select are properly spaced out.

Inline Labels

If you are using a checkbox, radio, or switch in a form, labels should be placed horizontally inline next to the component.

If you have a group of checkboxes or radios, you may include a top-level group label if needed. Avoid using a label above single form elements.
The existing Form React component does not easily support tooltips or required asterisks in inline labels. If you need this functionality, please help contribute it!


The form is built on a twelve column grid.

Within this grid, form elements may span multiple columns, depending on the needs of their content. For example, a street address may need to span the full twelve columns, whereas a ZIP Code may only need to span two or three columns.

In general, fields should adhere to one row each, unless they fall into a group of like elements, e.g. First & Last names, or State & ZIP Code.



Padding between label, description text and input field is 4px. Horizontal space between form elements is 24px.