HPE
Design System
Foundation
Components
Templates
Extend
Templates

Forms

Common form use cases from application configuration to payment acceptance.

Sign Up
for a Hewlett Packard Enterprise account
  • One uppercase letter
  • One lowercase letter
  • One special character
  • At least 8 characters
Open in Figma
Open docs

Guidance

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.

Usage

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

Required vs. optional fields

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.

Using help text

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.

Capitalization in forms

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

Button placement and labeling

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.

Form submission

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.

Accessibility

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

Sign Up

Sign Up
for a Hewlett Packard Enterprise account
  • One uppercase letter
  • One lowercase letter
  • One special character
  • At least 8 characters
Open in Figma

Sign in

Sign In
to Hewlett Packard Enterprise
Forgot password?
Open in Figma

Filter

Filter
Open in Figma

Sort

Sort
Select how results are ordered
Open in Figma

Change Password

Change Password
Open in Figma

Settings

Settings
for HPE Service
Description of feature
Description of feature
Open in Figma

Pay

Pay
for your HPE products
or
Credit Card Information
Open in Figma

Shipping

Shipping
for your HPE products
Shipping InformationShipping Address *
Contact Information
Open in Figma

Required and Optional Fields

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

Form Header
Provide a unique name.
Would you like to apply nemesis character?
The name of the superhero is already being used. Provide a unique name.
Open in Figma

Customize

Customize
your HPE Edgeline Server
How much memory does my server need?
What is the right processor for my workload?
Open in Figma

Related

Related content you may find useful when using Forms.

Components
TextInput
The TextInput component allows the user to input shorter forms of data and content.
Components
Button
Buttons are used to indicate actions that can be performed.
Components
MaskedInput
MaskedInput allows you to specify formalized text within a form field.
Components
CheckBox
When the user needs to select one or more options, use a checkbox.
Components
CheckBoxGroup
When the user needs to select one or more options from a set of options, use a CheckBoxGroup.
Components
RadioButtonGroup
When one option of a set of options can be specified, use the RadioButtonGroup component.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page
© 2021 Hewlett Packard Enterprise
Terms
Privacy
Security
Feedback