Bridge supports multiple form components. This page describes general form usage and structure. Specific form design patterns:

• Text Fields
• Form Selections - includes radio, checkboxes, and dropdowns
• File Upload

Basic Structure for all forms

Form Components

Required/Optional Fields

Required and Optional fields should be denoted by italicized letters in primary blue body text following the input prompt.

This applies to all form components. Below are examples of it on TextFields and TextAreas.

Helper Text

Required and Optional fields should be denoted by italicized letters in primary blue body text 8px from the bottom of the input prompt.

This applies to all form components. Below is an example of helper text on a TextField.

Errors

Error messages should:

• Be colored in primary red
• Written in sentence case
• Visible immediately after the user has filled in an invalid input, NOT during
• Be removed immediately once the user enters a valid input

Prompts and Fields with errors should:

• Be colored in primary red
• Have borders in 1 px primary red

Here's an example of a text field component:

Please look at documentation on each form component for examples and guides on their error state.

Multi-step forms

Forms with steps should be broken up into individual pages so that the user isn’t overwhelmed by a seemingly endless scroll of content. Names of steps should be clearly labeled on each page.

Progress Bars

Steps should be broken up into individual pages. Include status bars at the top so that the user knows where they are in the process of completing the form at all times. Each step should be clickable.

Navigation Buttons

Buttons to advance the user or bring the user back a step in the process of completing the form should be in the bottom right of the form.

Usage