COMPONENTS

Form

Form is a set of components that help to systematically layout and build forms.

Form Intro

Form includes three sub-components to build forms — Form Group, Form Text and Form Feedback.

Form Anatomy
  1. Form Group with Input
  2. Form Group with Button Select
  3. Label
  4. Form Feedback
  5. Form Text
  6. Action Buttons

Form Group can be wrapped around components used in a Form, such as Input or Radio. Form Group has three sizes — large, medium and small. The size controls the spacing between the groups.

Form Sizes

Form Text should be used to display informational text that helps the user with data entry.

Form

Form Feedback should be used to display text that provides validation information about a specific input such as an error or a warning. If both Form Text and Form Feedback are used on a component, Form Feedback should replace Form Text until resolved.

Form

Use the status property for components used in Form to provide feedback to the user during form validation.

Form Feedback

Form Feedback color is controlled by the status property.

Form Feedback

In Form, labels can be placed on top of components or to the left. All labels in a single form should use the same placement.

Form

Form can be designed to have a single column or multiple columns and change layout based on breakpoint. When adding form into a page, be sure to follow the Layout guidelines for responsive breakpoints, margins and gutters.

Form

The recommended placement for action buttons is the right edge of a form. When using right alignment of buttons, the primary action should be the right-most button with the secondary action to the left. If a tertiary action is required, then it should be placed to the far left.

Form
Form
Form

Left alignment is best used for a single button. When using left alignment for multiple buttons, the primary action should be the left-most button with the secondary action to the right. If a tertiary action is required, then it should be placed to the far right.

Form
Form
Form
  • Inline validations should appear 500 milliseconds after the user has stopped typing.
  • Errors are always shown once triggered until resolved.
  • Do not show Form Text at the same time that Form Feedback is displayed under the same input.