These components are used for forms, tools, and applications; they typically are not used on the static USPS.com® website, though some are used on the Postal Store and other ecommerce and marketing sites.
Checkboxes
Checkboxes are used when the customer can make one or multiple selections from the available options. Checkboxes should be vertically aligned unless there is a specific business or use case for horizontal alignment.
Like Radio Buttons, the use of a visible Input Field title is not required, but semantic grouping is. Unlike Radio Buttons, checkboxes can be arranged in columns when there are a larger number of options.
Make a Selection:
Input Field
Width: 20px
Height: 20px
Padding: 0px
Margin: 0px, 5px, 0px, 0px
Background: White #FFFFFF
Checked Box
Background: White #FFFFFF
Content: “\2714”
Font: Fontello
Style: 29px
Make a Selection:
Field Label
(if used)
Font: Helvetica Neue Roman
Style: 12px, Title Case
color: Text Gray #595959
Margin: Bottom 5px
Text Field
Font: Helvetica Neue Roman
Style: 14px, Title Case
color: USPS Digital Blue #333366
Padding-left: 7px
Error State
(if used)
Font: Helvetica Neue Roman
Style: 13px, Sentence Case
color: USPS Digital Red #E71921
Margin: Top 5px
Dropdowns
Use Dropdowns when a customer has multiple options to choose from, for instance when selecting a state. They’re especially useful when space is limited.
Most Dropdowns across USPS.com only allow a single dropdown list option; however, there are a few exceptions (e.g., the Missing Mail Color Dropdown).
Input Field
Width: Variable
Height: 44px
Padding: 5px 10px 5px 10px
Border: 1px, USPS Digital Blue #333366
Border-radius: 3px
Clear Space: Left/Right 15px
Background: White #FFFFFF
Chevron: /assets/images/default/blue-caretdown.svg
Field Label
Font: Helvetica Neue Roman
Style: 12px, Title Case
Color: Text Gray #595959
Margin: Bottom 5px
Field Text
Font: Helvetica Neue RomanStyle: 14px, Title Case
Color: USPS Digital Blue #333366; Text Hover/Form Field Rules Gray #999999 for ‘ghost text’
Input Field
Background: White #FFFFFF
Border: 1px, USPS Digital Red #E71921
Font: Helvetica Neue Roman
Style: 12px, Sentence Case
Color: USPS Digital Red #E71921
Input Fields
There are diverse uses of Input Fields including single-line discrete free-text form fields (e.g., First Name), multi-line comment or description fields (e.g., Special Instructions), and search.
Input Fields may include features such as spellcheck, blocking special characters, auto complete/auto suggest, and remaining character counters.
Input Field
Width: Variable
Height: 44px
Padding: 5px 10px 5px 10px
Border: 1px, USPS Digital Blue #333366
Border-radius: 3px
Clear Space: Left/Right 15px
Background: White #FFFFFF
Field Label
Font: Helvetica Neue Roman
Style: 12px, Title Case
Color: Text Gray #595959
Margin: Bottom 5px
Field Text
Font: Helvetica Neue RomanStyle: 14px, Title Case
Color: USPS Digital Blue #333366; Text Hover/Form Field Rules Gray #999999 for 'ghost text'
Input Field
Background: White #FFFFFF
Border: 1px, USPS Digital Red #E71921
Font: Helvetica Neue Roman
Style: 12px, Sentence Case
Color: USPS Digital Red #E71921
Application Navigation
Across the USPS.com domain there are several in-application navigation approaches employed, however, all new, redesigned, or refreshed applications need to follow one of the two following approaches.
Desktop Approach
Desktop in-application navigation is right-aligned and listed directly opposite the application title <H1>. The current/active page is indicated with a #E71921 underscore.
If the application navigation includes a link to externally-hosted FAQs, do not use a red chevron with the FAQ link; this is an old practice that has been discontinued. If there is a concern about the user being taken out of the application, open the FAQs in a separate browser tab or window.
Application Title
-
Create a Label
- /
Preferences
- /
Shipping History
- /
Address Book
- /
Shipping Cart
Desktop Application Navigation with application title.
Mobile Approach
There are several compliant approaches to mobile in-application navigation depending on the complexity of the application:
- Do not display application navigation; instead provide a link back to the application landing page from which the user can navigate
- List navigation links (for applications with only a few pages)
Go-To Navigation
Progress Bar & Application Steps
Some applications appear on a single screen while other span multiple screens.
Step-based applications use a modified <H2> with a non-bold step identification followed by a bold step title. In order to keep forms as short as possible, detailed step-specific instructions or explanations are often provided via an Information Icon with a popover.
Multiple screen applications typically use a progress bar, however, it is not required. Progress bars are not used with singlescreen applications.
Progress bars are left-aligned and can extend to the full screen width, but are not required to do so. The progress bar indicated the current and completed steps with USPS Digital Blue (#333366), while future and incomplete steps are indicated in gray. A step indicator (i.e., “Step # of #”) appears above the current step bar on desktop and is left-aligned on mobile.
Desktop Progress Bar with Application Step
Pagination & Results Per Page
Search and applications that leverage search- and form-filter-based listings of results that are presented across multiple screens utilize standardized pagination and results per page fields.
Pagination
Pagination is based on the number of results screens. The Pagination array shows up to five (5) results plus directional chevrons to assist users in navigating to next and previous results. “Next” and “Previous” labels may be included, but are not required.
USPS Digital Red (##71921) chevrons indicate additional results in that direction (up or down). Gray chevrons indicate no additional results in that direction. The current result set is indicated with a USPS Digital Blue (#333366) circle and contrasting White (#FFFFFF) text.
Results Per Page
Some search- and filter-based results listings allow the user to determine the number of results to list per screen (page). When this functionality is included, a standard dropdown is used to allow the user to select from presets.
Results Per Page:
Transparent Overlays
Typically used with modals, transparent overlays consist of a #333366 fill at 50% opacity.
Information Icon with Popover & Modal
Depending on use and context, information icons can be used with either a popover or a modal.
This is an active info icon with a popover
(HTML-based).
This is an active information icon with a modal.
Modals boxes appear atop the main screen content and require user interaction to close. This interaction typically includes acknowledging an alert or warning, making some kind of selection, or providing required inputs. Modals typically include a close “X” button at the top right of the modal box, but this close button is not required if the modal presents the user with a binary selection (yes/no, agree/exit, etc.). On desktop, box is horizontally centered; on mobile it extends full width only revealing the overlay above and below the box.
Example: This is an active information icon with a modal.
Loader/Processing Modal
Loaders are displayed as part of a modal and inform the user that processing is occurring behind the scenes or that content is being loaded on the screen.
Calendar
Calendars are presented as singlets (a single month), diptychs (two months side-by-side), and triptychs (three months side-by-side). They can either be displayed as an element within a screen or as a tooltip.
When required, users may scroll to previous or subsequent months using the previous and next navigation chevrons at the top of the calendar widget. For singlets, this appears in line with the month heading. For diptychs and triptychs, the navigation chevrons are vertically centered on the left and right of the calendars.
Dates that can be selected appear with a white (#FFFFFF) background. Dates that cannot be selected appear with a gray (#D8D8D8) background. Selected (or current) dates appear with a USPS® Digital Blue (#333366) background (with white text).
Calendar Tooltip
Start Date:
End Date:
Required Fields
Required form fields should always be indicated with an asterisk (*) leading the form field element label, as well as a “* indicates a required field” notification should be listed at the beginning of the form, as illustrated below.
Note: Identifying only non-required form fields is not an allowable pattern (i.e., all fields are required unless indicated otherwise).
Quantity Picker
This component is typically used for adjusting cart item quantity, but it can also be used when requiring users to make any numeric quantity selection (note: not for use with date or year selectors).
