Form Inputs
Today, users interact with forms on all kinds of devices. Because user input and selection may be with a finger or a mouse, form fields have been enlarged to the minimum touch target size of 44px. Futhermore, subtle cues have become standard in usability to help users during the process of completing forms. Focused or selected fields are shown with a teal stroke.
Best Practices
Review the following guidelines for optimal form design and development.
- Write clear and concise labels. Use simple and succinct labels that help the user understand what information is required at a glance.
- Stack labels vertically above input field in order to:
- Allow the eye to scan the information more quickly.
- Reduce cognitive load so the user does not struggle to connect the label and input.
- Optimize design for mobile with full width label and input.
- Use a single-column layout. Single-column layouts are easier to follow, understand, complete and submit.
- Clearly title your form so users understand exactly what they’ll achieve or receive once they submit it.
- Add progress bars or a multi-step process for long forms. Chunking information helps users process, understand and remember information and also gives a clear indication of how much effort is required to complete the form.
- Group related fields together and provide clear section titles (e.g. Contact Information) and adequate spacing.
- Make action buttons descriptive, giving the user a clear understanding of what will happen upon selecting it. Avoid generic labels such as “Submit” and “Send,” using instead labels that describe the action.
- Use the Default or Prominent button for the primary action and the Subtle or Ghost buttons for secondary actions.
- Tooltips. Address possible user concerns with information tooltips. For example, why you need to collect specific information or how you will use that information.
- Error Messages. Craft error messages that do not blame the user. It should explain the issue at hand and provide clear, direct instructions on how to correct the error.
- Success Messaging. Notify users of a successful completion of a form with a toast and next steps (if applicable).
- Use inline form field validation. It should appear once a user has moved to the next field, not while the user is still working within a field.
- Use auto-fill browsers. Title each field with a common attribute that browsers will recognize to help speed up the form completion process for your visitor.
- Enable the ability to tab to next form field. Allow usage of the tab key on forms so users can move to the next form field without lifting their hands off a keyboard.
- Offer field focus. Auto-focus the first input field in your form. Auto-focusing a field gives the user an indication and a starting point, so that they are able to quickly start filling out the form. Thereafter, make the active input field prominent and focused.
- Provide matching keyboard for mobile users. Set HTML input types to show the correct keypad. Seven input types are relevant to form design:
- input type="text" displays the mobile device’s normal keyboard.
- input type="email" displays the normal keyboard and '@' and '.com'.
- input type="tel" displays the numeric 0 to 9 keypad.
- input type="number" displays a keyboard with numbers and symbols.
- input type="date" displays the mobile device’s date selector.
- input type="datetime" displays the mobile device’s date and time selector.
- input type="month" displays the mobile device’s month and year selector.
Checkboxes
Use checkboxes when multiple options can be selected.
Default
- Button
- background-color: none
- border: 1px solid
- border-color: Gray A
- radius: 4px
- Label Text: Checkbox/Radio Label
- Group Title: Checkbox/Radio Label
Robust
Button and Group States
Hover
- border: 2px solid
- border-color: Teal
Active/Selected
- background-color: Teal
- border: none
- border-color: none
- Icon
- font-face: FontAwesome5ProRegular
- font-size: 16px
- text-color: White
- code: check (f00c)
Disabled
- opacity: 50%
Error - Default
- border-color: Red
- Text: Checkbox/Radio Label - Error
Error - Hover
- border: 2px solid
- border-color: Red
- Text: Checkbox/Radio Label - Error
Error - Active/Selected
- background-color: Red
- border: none
- border-color: none
- Text: Checkbox/Radio Label - Error
- Icon
- font-face: FontAwesome5ProRegular
- font-size: 16px
- text-color: White
- code: check (f00c)
Group - Error
- Label Text: Input Error Description
Group - Disabled
- opacity: 50%
Radio Buttons
Use radio buttons when only one selection can be made. If there are more than 7 options, use a select menu instead.
Default
- Button
- background-color: none
- border: 1px solid
- border-color: Gray A
- radius: 4px
- Label Text: Checkbox/Radio Label
- Group Title: Checkbox/Radio Title
Robust
Additional States
Hover
- border: 2px solid
- border-color: Teal
Active/Selected
- background-color: Teal
- border: none
- border-color: none
- Inner Circle
- background-color: none
- border: 2px solid White
Disabled
- opacity: 50%
Error - Default
- border-color: Red
- Text: Checkbox/Radio Label - Error
Error - Hover
- border: 2px solid
- border-color: Red
- Text: Checkbox/Radio Label - Error
Error - Active/Selected
- background-color: Red
- border: none
- border-color: none
- Inner Circle:
- background-color: none
- border: 2px solid White
- Text: Checkbox/Radio Label - Error
Group - Error
- Label Text: Input Error Description
Group - Disabled
- opacity: 50%
Text Input
Form labels are always shown above the form field and left justified. Never place the label to the left of the field because it is not immediately apparent to a user what input is required.
Default
- Input
- background-color: none
- border: 1px solid
- border-color: Gray A
- radius: 4px
- Label Text: Input Label
Robust
Additional States
Filled
- Input Text: Input Content
With Placeholder
- Placeholder Text: Input Placeholder
Disabled
- opacity: 50%
Hover
- border: 2px solid
Active
- border-color: Teal
- *Use browser focus state
With Info
- Icon
- font-face: FontAwesome5ProRegular
- font-size: 16px
- text-color: Gray D
- code: info-circle (f05a)
With Description
- Input Text: Input Content
- Description Text: Input Description
Error
- border-color: Red
- Text
- Label: Input Label - Error
- Input: Input Content
- Error: Error Description
- Icon
- font-face: FontAwesome5ProLight
- font-size: 24px
- code: exclamation-triangle (f071)
Date Picker
- Icon
- font-face: FontAwesome5ProRegular
- font-size: 16px
- text-color: Gray D
- code: calendar (f133)
Search
- Search Text: Input Placeholder
- Icon
- font-face: FontAwesome5ProRegular
- font-size: 16px
- text-color: Gray D
- code: search (f002)
Clear Search
- Text: Input Content
- Icon
- font-face: FontAwesome5ProLight
- font-size: 16px
- text-color: Gray D
- code: times (f00d)
Text Area
Default
- Input
- background-color: none
- border: 1px solid
- border-color: Gray A
- radius: 4px
- Label Text: Input Label
Robust
Additional States
Filled
- Input Text: Input Content
With Placeholder
- Placeholder Text: Input Placeholder
Disabled
- opacity: 50%
Hover
- border: 2px solid
- border-color: Teal Hover
Active
- border-color: Teal
- *Use browser focus state
With Info
- Icon
- font-face: FontAwesome5ProRegular
- font-size: 16px
- text-color: Gray D
- code: info-circle (f05a)
With Description
- Input Text: Input Content
- Description Text: Input Description
Error
- border-color: Red
- Text
- Label: Input Label - Error
- Input: Input Content
- Error: Error Description
- Icon
- font-face: FontAwesome5ProLight
- font-size: 24px
- code: exclamation-triangle (f071)
Select
Default
- Input
- background-color: none
- border: 1px solid
- border-color: Gray A
- radius: 4px
- Text
- Label: Input Label
- Input: Input Content
- Icon
- font-face: FontAwesome5ProSolid
- font-size: 16px
- text-color: Gray A
- code: caret-down (f0d7)
Robust
Active Single Select
Active Multi-Select
Additional States
Hover
- border: 2px solid
- border-color: Teal Hover
With Description
- Description Text: Input Description
Disabled
- opacity: 50%
Error
- background-color: none
- border: 2px solid
- border-color: Red
- Text
- Label: Input Label - Error
- Error: Error Description
- Error Icon
- font-face: FontAwesome5ProLight
- font-size: 24px
- text-color: Red
- code: exclamation-triangle (f071)
With Info
- Info Icon
- font-face: FontAwesome5ProLight
- font-size: 18px
- code: info-circle (f05a)
Single Select
Active
- Input
- background-color: White
- radius: 4px
- shadow: 0px 2px Black
- shadow blur: 24px
- border: 2px solid
- border-color: Teal Active
- Option Text: Input Content
- Icon
- font-face: FontAwesome5ProSolid
- font-size: 16px
- text-color: Gray A
- code: caret-up (f0d8)
Active - Item Hover
- Hover Highlight
- background-color: Gray F
Active - Item Click
- Active Option Text
- text-color: Gray A
- Highlight on Click
- background-color: Teal Active
Multi-Select
Multi-Select - Active
- Input
- background-color: White
- radius: 4px
- shadow: 0px 2px Black
- shadow blur: 24px
- border: 2px solid
- border-color: Teal Active
- Icon
- font-face: FontAwesome5ProSolid
- font-size: 16px
- text-color: Gray A
- code: caret-down (f0d7)
Active - Item Hover
- Hover Highlight
- background-color: Gray F
Active - Item Click/Selected
Focus State
For all inputs, the focus state is derived from the browser. We also change the input border color as outlined below.
- border-color: Teal
Error Messaging
Error messages appear after the label and before the input. A light red background is used to bring attention to the message, while a red border highlights the input.
See Alerts page Error messaging specifications at the top of the page.
- Error Background
- background-color: Red
- border: none
- border-radius: 4px
- Error Text
- Error Description
- Icon
- font-face: FontAwesome5ProLight
- font-size: 24px
- text-color: Red
- code: exclamation-triangle (f071)
Description
Descriptions are used to provide additional instructions the user needs to complete the task. They should only be used when information is needed in order to prevent an error. Use Descriptions sparingly to prevent information overload within a form. Descriptions have a 100-character maximum.
The Description is placed before the input to provide necessary information before the user engages with the input, both for sighted users and those using screen readers. In order for screen readers to verbalize this information, the subordinate content must be nested within the label.
Note: Do not use placeholder text to provide information the user needs in order to execute the task.
- Description Text
- Input Description
Validation
Validation Types
Inline
Inline validation shows the user in real time if an error has occurred while filling out a form. It may be an input error, such as using an incorrect character, or it could be that the field is required and was tabbed through. Using inline validation is preferred.
Best Practice
- Errors should not appear before the user has finished completing the input.
- Error messages should be removed dynamically once the user has corrected their mistake. Messaging should live-update on a keystroke level.
With Mistake
Corrected Mistake
Post-Validation
In post-validation, the form is checked for errors after the user selects to save or submit. The page reloads, and the same visual cues are used as with inline validation. In addition, an error alert is used. Inline validation and post-validation can be combined to show errors inline and then messaging after validation.
Corrected Mistake
Contact Information
Required Fields
It’s important to differentiate between required and optional fields. When using forms that contain mostly required fields, we recommend indicating which inputs are optional, rather than marking the required fields. Do not use an asterisk in the label to indicate mandatory fields—instead, write out “Optional” or “Required.”
To maintain consistency and set expectations for the user, select one approach to use within a single application.
Example