Forms
Search the component library

Forms

v1.1.2
Download UI Kit v2.1.0

Forms provide standard structures and behaviors for multiple input forms. All forms must follow the structures and behaviors listed in this component.

Download UI Kit v2.1.0

Standard forms

A standard form contains 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 a standard 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 after 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 a UI element (such as a Back button) so users can return to the previous step in the process.

Standard 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.

Present top level errors relevant to the form as a whole above the first input and below the form name as an alert message.

Redlines

Standard 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

Instructional textFor form with informational text, 24px above and below the informational 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.2

  • REPLACED: The warning icon from font format to 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.