Forms
Search the component library

Forms

v1.1.2
Download UI Kit v1.9.0

Provides standard structure and behavior for multiple input forms.

Download UI Kit v1.9.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

Typography
Spacing
  • 36px 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
Buttons
Input style
  • Can be either basic or fancy, form redlines are the same either way

Form Instructions

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

Alert Message

Spacing
  • 24px between the form name and the alert.
  • 24px between the alert and first input.
Alert

Form groups

Typography
Spacing
  • 16px between Section name and horizontal line.
  • 36px between horizontal line and first input.
Horizontal line

Changelog

1.1.2

  • REPLACED: The small warning icon in front of the error message from font format to a Sketch file

1.1.1

  • ENHANCED: The accessibility of the error message for color blind users by adding an icon in front of the error message under the input field

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.