Forms
Search the component library

Forms

v1.1.0
Download UI Kit v2.1.0

Provides standard structure and behavior for multiple input forms.

Download UI Kit v2.1.0

Usage Guidelines

Any form should follow the structure and behavior laid out in this component.

Features

  • Alerts messaging placement in a form
  • Multi step forms
  • Single column form layouts
  • Form groups
  • Responsive form

Basic form

The basic form consists of several parts: a form name, an optional set of form instructions, an optional alert message, one or more input fields, and primary/secondary action buttons.

Form name

Form instructions

Optional. Instructions for filling out the form.

Alert message

Optional. See error handling section for more details.

Input fields

Can be either the basic or fancy style.

Buttons

Where it makes sense, a standard pattern is to have the submit (or equivalent) button 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.

Basic Form
Form Instructions
Alert Message

Example of basic form showing all the principal components

Form groups

If you have many fields, consider organizing related fields into groups. Each group can have a section name. A form group consists of a section name followed by a horizontal line and input fields.

Form Groups

Responsive forms

The width of the form adjusts to the width of the viewport.

Basic form (small and extra small devices)

Form group (small and extra small devices)

Example of the Sign in screen with fancy style form fields

Error handling

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

Top Level Errors relevant to the form as a whole should be presented above the first input and below the form name as an alert message.

Redlines

Basic form

TypographyForm name is Basic Section UI Heading
Spacing36px between Form Name and first input field
36px between all inputs (this includes space dedicated for one line of error text)
52px between the last input and the associated buttons
For side by side input fields use the gutter width of the current breakpoint as the spacing
ButtonsUse Large Buttons
Input styleCan be either basic or fancy, form redlines are the same either way

Form Instructions

Instruction textFor form with information text, 24px above and below the information text and form title/first input field

Alert Message

Spacing24px between the form name and the alert.
24px between the alert and first input.
AlertUses the Inline Alert style, typically in the Warning/Error variant

Form groups

TypographySection name is Basic Section UI Heading
Spacing16px between Section name and horizontal line.
36px between horizontal line and first input.
Horizontal line1px Concrete

Changelog

1.1.0

  • FIXED: Cleaned up documentation, redlines, feature links, etc.
  • UPDATED: Delete responsive spec
  • ADDED: Feature links
  • UPDATE: Adding dependencies Grid and Breakpoints

1.0.0

Initial version.