Skip to main content

Components

The building blocks of Forge applications.

App Bar

The app bar is the header for applications. It houses navigation items and tools related to the app.

App launcher is a persistent navigation component for users to view and launch programs.

The Help Button is used in the app bar as a gateway to various help and informational options for the user.

The Menu Button is used in the app bar to control the visibility of the navigation drawer.

Notifications is used in the app bar to show various system notifications for the user.

Profile button is used with a predefined avatar, and is responsible for displaying profile information within a popup.

The app bar Search provides a familiar search experience for users across programs.

Buttons

Buttons allow users to take actions, and make choices, with a single tap.

Floating action button

A floating action button (FAB) performs the primary, or most common, action on a screen, primarily on mobile.

Icon buttons communicate actions that users can take using only an icon.

Split buttons condense several, related, actions into a single compact component.

Cards

A card is intended to be used as a layout design element to help group related content together into sections.

Controls

Button toggles provide a group of interactive button elements that are related to one another.

Checkboxes allow for selecting multiple options from a set.

Radio buttons allow for the selection of a single option from a set.

Switches toggle the state of a single item on or off.

Date & Time

The calendar lets users select a date, or a range of dates.

The date picker allows users to enter a date either through text input or by choosing a date from the calendar.

Date range picker

The date range picker allows users to enter a date range.

Fields

Autocomplete is an add-on component that binds to inputs and shows suggestions as the user types.

The chip field enables user input, and verifies that input, by converting text into chips.

The file picker is used to upload one or more files to an application.

The label value component displays read only label-value pairs.

A select is a form field that displays selectable values via a dropdown list.

Sliders allow users to make selections from a range of values.

Text fields let users enter and edit text.

Time pickers help users select and set a specific time.

Layouts

Landing page layout

Used to create consistent landing pages in community apps.

The scaffold is used to create common page and component layouts with a header, scrollable body, and footer.

Lists

Lists are a continuous vertical group of text or images that may contain primary and supplemental actions.

Navigation

Drawers are used to support supplementary information on the left and right side of a screen.

Menus display a list of contextual choices in a pop-up. They appear when users interact with a button, action, or other control.

Navigation drawer

The drawer component contains supplementary content that are anchored to the left or right edge of the screen.

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.

Notifications & Messages

Badges are used to indicate an item’s status. They may display a count, descriptive label, or status.

A banner is intended to be used as a way to deliver a short but important message to the user.

Bottom sheets provide contextual information, options, or actions in a way that's easy to reach on a mobile device.

A busy indicator is used when a component or page is loading or changing and prevents users from interacting with content.

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

An inline message communicates information to a user inside of another component, such as a form.

Toasts provide brief messages about app processes at the bottom of the screen.

A tooltip displays informative text when users hover over, focus on, or tap an element.

Page

The accordion ensures that only one, at most, child expansion panel is open at a given time.

The divider is used to visually separate groups of content within a section.

Expansion panel

The expansion panel displays summary information and reveals additional details on tap or click.

Filter sidesheet

The filter sidesheet offers a standard filtering experience that can be used in any application.

The footer is used in resident apps to display links pertaining to a specific municipality.

The page state component is a layout design component that facilitates full page states.

Split view is used to show elements side-by-side in resizable panels.

The toolbar is a container used to place titles and actions and align them with consistent spacing and positioning.

Progress & Loading

Circular progress

Circular progress spinners are used to indicate that a particular element is loading within an interface.

Linear progress

Linear indicators express an unspecified wait time or display the length of a process.

A skeleton screen provides a visual cue that content is being loaded.

Steppers

Steppers display progress through a sequence by breaking it up into multiple logical and numbered steps.

Table

The paginator is used to “chunk” collections of logically sorted records into manageable pieces.

The table displays information in a grid-like format of rows and columns.

Utilities

The Avatar allows you to provide text (default), or an image, to represent an entity.

Chips are compact elements that represent an input, attribute, or action.

The color picker allows users to select a color visually. It can produce values in formats such as Hex, RGBA and HSV.

Icons create an expression of brand and provide clear visual patterns and expectations.

The popup is a component used to facilitate elements that appear above other content.

The view switcher component is used for displaying a single view at a time out of a set of available views.