Forms

Forms provide a way to collect important data from a user. However, this data is only collected effectively when Forms are built in a way in which users are inclined to fill out in full.

Forms don't need to be a tedious task for users to complete, as they often come to be. It is important to ease as much of this effort as possible when building a Form. Making Forms simple to complete leads to increase in form completion.

Follow these guidelines when creating a Form:

• Use as few fields as possible
• Wrap all input elements within a FormField
• Fill in default values for as many fields as possible
• Reveal fields progressively so the user is not overwhelmed
• Use clear, concise labels for each field
• Use placeholder text as an added visual indication of expected input value format

When possible, restrict Forms only to fields that are required. This ensures that the Form remains concise for the user. However, there may be cases where optional fields may be fitting.

When using a mixture of required and optional fields, apply the "required" prop to any given FormField restrict form submission until this field has been completed.

In most cases, the FormField label should be clear enough to instruct the user how to complete a field. However, if help text is required, ensure that it is kept brief and precise.

Help text may be relevant for cases such as password requirements or additional resources on a field's context.

Writing standards contribute to the voice, tone, and grammatical accuracy that inform the experiences we create. These standards are aligned with HPE Brand.

Within a form, you should:

• Use title case and capitalize short prepositions when they are the last word in a sentence (e.g. Sign Up, Sign Out)
• For headings and captions, use sentence case

Submit, reset, or cancel buttons should always be placed at the bottom of a Form.

Button labels should be specific to the action of the button. For example, a sign-up form may have a submit button with label "Sign Up". Alternately, a password change form may have a button with label "Update Password".

Button label specificity provides users confidence in the action they are performing.

Visual feedback is important to instill confidence in a user after form submission.

On submission, your form should:

• In the case of an error, focus should be placed on the input element where the error occurred.
• Provide user with indication that form was submitted successfully (e.g. notification, success page, etc.)
• Display all relevant errors accompanied by text explaining actions needed to resolve.
• Allow user to continue navigating through the application immediately

Never force the user to wait for post-submission processing to complete before they can continue using an application.

All Form input elements need to be contained within a FormField.

FormFields need to have:

• A "for" property that matches the id of its child input. If using Grommet, this is applied with the htmlFor prop.
• A "name" property applied on both the FormField and its child input element
• A clear, concise label

For standard forms, use an asterisk(*) to indicate required field/controls. Optional fields receive no treatment.