Forms are a collection of related inputs used to gather information from the user
Forms are common user interfaces that are used to get information or data from the user. They can be simple or complex and can be presented in a variety of ways depending on the situation.
To capture several words
Name, Password, Address
To capture several lines of text
To select one or more choices
To choose one of two binary options
To select only one of several choices
To select only one of a few choices
To select a numerical value or range from a minimum and maximum
To select a date or range of dates
To upload or attach a file or multiple files
Import recipient list
Labels allow the user to quickly scan through forms and are required on every field:
Forms should always have a title that describes the form.
Longer forms with several groups of fields can split each group with panel sections along with sub headers. Fields should be grouped together by relevance. Fields that are directly related to each other may be grouped horizontally.
Follow a logical and predictable order when placing fields. For example, a login form should display email before password.
Help text is used to assist the user with understanding how to complete a single form field. Help text can be presented to the user in two different ways, either below the relevant field or through tooltips.
Client side validation or error messaging assists the user with understanding how to properly complete a form. It informs the user what and where the issue is, and provides guidance on how to correct it. Error messaging should occur at the field level, to help identify which fields need correcting. If an error message pertains to multiple fields, a Banner should be displayed at the form level.
Field-level error messages should only be visible if:
Buttons in a form are used to either submit the form, or to discard changes. Use a filled blue button for the primary action, and an outlined blue button for the secondary action.
Submit buttons should always appear on the bottom left corner of the form. Submit buttons should never be top-aligned.
Submit button labels should always tell the user what to expect. Use a verb & noun combination to describe your submit action.