This should use one of the Section UI Heading styles, and defaults to the Basic variant. It is required and should describe the ultimate action of the form.

Top Level Error

See Error Handling below.

Input Fields

One or more input fields from the input component may be included in the form. Currently, these will all occupy 100% of the form width and stack with 40px of spacing between them.

Next/Submit Button

This button should start out as a default button and become a primary or CTA button once the form has been completely filled out.

If the form is broken up into multiple pages, use a “Continue” or “Next” button to advance in the form series. Maintain the same Form Name between each page. You should also include some UI for returning to previous steps in the process, where possible.

A basic form showing all the principle components.

Error Handling

Individual input fields should present their own errors following the styles dictated in the inputs components. Fields with errors should always be accompanied by error text, unless a top level error message is sufficient to understand and fix the problems.

Top Level Errors relevant to the form as a whole may be presented above the first input and below the form name. It should consist of a single line message (which is colored red) and then an optional chunk of body copy that explains the situation in more detail.

An example of errors specific to individual input fields.

An error has occurred which effects all input fields in the form.

Redlines

Typography

Form name is some Section UI Heading, defaults to basic
Top Level Error is basic body copy, Strawberry Red for the first line and Charcoal for any additional text

Spacing

20px between Form Name and a Top Level Error
30px between Form Name or Top Level Error and the first input
40px between all inputs (this includes space dedicated for one line of error text)
40px between the last input and the Next/Submit button

Changelog

1.0.0

Initial version.