Switchboard

Approved — Ready for dev

Switchboard is used when there is a need to offer the user the ability to switch between different types of content or between views.

Anatomy

Tabs

Tabs are used to organize content for a section across multiple pages to separate out the content into more digestible sections. Tabs can be used for desktop and mobile devices but should be used on native mobile as a last resort. Each tab will follow one after another with the active indicator.

Text label - Subtitle 1
Tab indicator - 2px

Grouped tabs (Mobile)

To ensure the tabs align with the heading and mobile margin, a leading alignment spacer is necessary.

Leading alignment spacer - 24px (optional)

Grouped tabs (Desktop)

To ensure the tabs align with the heading and desktop margin, a leading alignment spacer is necessary.

Leading alignment spacer - 40px (optional)

Switchboard

Switchboard has two sizes, large and small with two variants for each size: alpha/numeric and icon only. The small switchboard is recommended to take the place of tabs on mobile devices when possible. The overall height for the large variant is 48px and 40px for the small variant.

Large Alpha/numeric

Selected surface/container
Text label - Subtitle 1
Surface/container

Small Alpha/numeric

Selected surface/container
Text label - Subtitle 2
Surface/container

Large icon only

Selected surface/container
Icon - Medium avatar 40
Surface/container

Small icon only

Selected surface/container
Icon - Small avatar 32
Surface/container

Specs

Color

For all of the following tables, “--” is a stand-in for the branded prefix.

Tabs

Element	Property	Value
Container	Background color	Defined by theme or ∆colorPlatformWhite
Text Label	Text color	∆color--On or ∆colorPlatformGray900
Tab indicator (Static)	Background color	∆colorPlatformAlpha0
Tab indicator (Hover)	Background color	∆colorBrandedGuidance100
Tab indicator (Selected)	Background color	∆colorBrandedGuidanceAccessible

Switchboard

Element	Property	Value
Container	Background color	∆colorPlatformGray50
Container (Selected)	Background color	∆colorPlatformWhite
Tab indicator (Static)	Background color	∆colorPlatformAlpha0
Text Label (Active)	Text color	∆colorPlatformGray900
Text Label (Inactive)	Text color	∆colorPlatformGray600
Avatar (Static)	Background color	∆colorPlatformAlpha0
Avatar (Static)	Icon color	∆colorPlatformGray600
Avatar (Hover)	Background color	∆colorPlatformAlpha0
Avatar (Hover)	Icon color	∆colorPlatformGray900
Avatar (Selected)	Background color	∆colorPlatformAlpha0
Avatar (Selected)	Icon color	∆colorPlatformGray900

‍

Spacing

Tabs

Large Toggle

Small Toggle

States

‍

Theming

For tabs, the background will match the color of the mobile top header.

Shape

The toggle variant is the only one to consider shape. Tabs are always a sharp shape.

Element	Property	Value
Container	Border Radius	∆shapeBrandedSmall

Placement

Tabs

Tabs are always placed below the heading title because they are subsections of the main page. This placement applies to mobile and desktop. Tabs can either be auto width or full width placement.

Auto width

Auto width tabs are where the tabs can run off the screen to accommodate as many tabs as needed. The indicator will span the width of the text label.

Full width

Full width tabs are when you have less than enough space to fit inside the container with the tabs not going off the screen. Once you have more than can fit, it will switch to auto width tabs. The indicator will span the width of the tab container.

Full width title wrapping

When the title becomes too long, it will wrap to another line. It is recommended to use the auto width tabs if you know the tab title will be too long, which will allow it to stay on one line.

Page scrolling

When scrolling on mobile, the tabs will be pinned underneath the mobile top header.

Desktop

Toggle

Toggles can either be auto width or full width placement.

Auto width

Auto width toggles are where they are not confined to a container and will be aligned with the rest of the content in the area, reinforcing the overall alignment framework of the context. In most cases, this will mean that toggle should be left-aligned so as to reinforce the primary keyline.

Full width

Auto width toggles will fill the width of the container they are in. These will often be used for mobile to replace the need for tabs on a mobile experience.

Behavior

Tabs

Moving between tabs

To move between tabs, the user would tap or click to be directed to a different view.

Interaction	Steps	Duration	Easing	Notes	Haptics
Slide	Tab indicator slides	∆motionTimeExtraFast	∆motionTimingFunctionStandard	The tab indicator slides from the current tab to the new pressed tab.	Light on trigger (Flutter: Selection Click)

Tabs overflow

For mobile, there may be too many tabs and they cannot all fit on the screen. To bring them into view, the user would use a dragging motion and scroll within the tab list.

Toggles overflow

For mobile, if toggles do not fit within the width of the container then use a dropdown.

Toggle

Moving between toggles

To move between toggles, the user would tap or click to be directed to the different content.

Interaction	Steps	Duration	Easing	Notes	Haptics
Slide	Switchboard indicator slides	∆motionTimeExtraFast	∆motionTimingFunctionStandard	The switchboard slides from the current tab to the new pressed tab.	Light on trigger (Flutter: Selection Click)

‍

Developer Docs

Vue Developer Docs

Component documentation coming soon!