Application Components

Form Fields

Radio Buttons

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.

Radio Buttons are used when there are a limited number of options to choose from and the customer needs to make a single selection (options are mutually exclusive). For 6 or more options, use a dropdown list instead.

Radio Buttons should be vertically aligned unless there is a specific business or use case for horizontal alignment. Additionally, the use of a visible Input Field title is not required, but semantic grouping is.

Radio Button Specifications

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.

Checkbox Specifications

Toggles

Toggles are a digital switch that let users select between two mutually exclusive options. They are typically used for preferences or selecting between two states.

Toggle Specifications

Text 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.

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).

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 USPS Digital Red #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

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)

---

Pagination & Results Per Page

Search and applications that leverage search-based 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 (#E71921) chevrons indicate additional results in that direction (left or right). 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.

Instance of pagination array component

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:

10 24 36 48

Instance of pagination dropdown component

---

Transparent Overlays

Typically used with modals, transparent overlays consist of a USPS Digital Blue #333366 fill at 50% opacity.

Information Icon with Popover (Tooltip) & Modal

Depending on use and context, information icons can be used with either a popover (tooltip) or a modal. Modal boxes appear atop the main screen content and require user interaction to close. This interaction typically includes acknowledging an alert or warnng, making some kind of selection, or providing required inputs. Modals include a close "X" icon at the top right of the modal box, this close "X" icon is required even if the modal presents the user with a binary selection (yes/no, agree/exit, etc.).

This is an active info icon with a popover (HTML-based).

Desktop

On desktop, the modal box is 800 px wide and horizontally centered.

This is an active information icon with a modal.

×

Modal Title

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.).

Primary CTA

Secondary CTA

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.

×

Modal Title

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.

Primary CTA

Exit

Instance of modal component for desktop

Mobile

On mobile, the modal box is horizontally centered with 8px spacing on both sides.

×

Modal Title

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.

Primary CTA

Exit

Instance of modal component for mobile

---

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. This component is responsive and works on desktop or mobile screens.

Headline Title

Message Text.

Instance of loader/processing modal component

---

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 Dark Background Gray (#D8D8D8) background. Selected (or current) dates appear with a USPS Digital Blue (#333366) background (with white text).

Calendar Tooltip

* Calendar Input Field Please select a date.

Clear Dates

---

Quantity Picker

Choose a Quantity

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).

---