Segmented Control

Segmented control allows users to toggle between alternate views of the same content.

Guidelines

When to use

Change content’s layout: Allow the user to toggle between different design layouts of the content, e.g., table view, list, and card layout.

Change content’s format: Allow the user to change the data format in the related content, e.g., to 24- and 12-hour formats.

Sort content: Allow users to reorder the list according to specific criteria quickly.

Segmented Control used to chnage layout

Segmented Control used to chnage format

Segmented Control used to sort

When not to use

Organizing content into distinct sections: Segmented Control should never be used to create sections with distinct information. Instead, Tabs should be used.

Don't

Don't use Segmented Control to organize text into distinct sections, as they contain different content.

Use Tabs to organise content into distinct sections and help user find what they need.

Form selection control: Segmented Control cannot be used in a form when asking the user to select an option that will be saved and processed. MDS offers alternative components, which are documented in the form of component guidelines.

Don't

Don't use Segmented Control as a selection control in forms.

Use Selecton Cards, Radio Buttons, Chips or Select in forms to allow user choosing one from multiple available options.

Choosing a path in the form: Using Segmented Control ina. form to offer different paths to the user is not an approved pattern. It can be unclear to the user which data they should fill and what will be saved. Instead, try offering alternative paths in a step before. You can achieve it by using Drodpown or Split Button or adding an extra step in the form.

Don't

Don't use Segmented Control as a way to choose a path inside a form. It provides confusing experience to the user.

When you have alternative paths in a flow, try to offer the choice by providing multiple action triggers or adding an additional step in a form.

Segmented Control vs Tabs

Segmented Control allows users to toggle between alternate views for the same content. Tabs organize content into distinct sections within a single page. When switching tabs, user expect to see different information. When switching segments, they expect the same information in a different layout, order or format.

In the analog-life metaphor, tabs are like separate binders that help you quickly find the document you need. You know it can only be in one binder at a time. Segmented Control acts like a pencil with an eraser. You take that document and change the information’s format, layout, and order, keeping the same information.

Example of Segmented Control

Segmented Control allows for a change in the granularity of the time axis but displays the same data regardless of which Segment is selected.

Example of Tabs

Tabs separate a long list of messages into distinct categories. An allowed exception is an "All" tab, which is a preview of all messages.

Sizes

Height

Segmented Control comes in four height sizes: Small, Medium, Large, and Extra Large. Use the one that best matches the UI’s density, actions hierarchy, and the size of surrounding Buttons and Form Fields.

Width

The width of the Segmented Control should be adjusted to the UI and the length of the Segments’ labels. All Segments should be the same width.

All Segments should have the same width

Don't

Do not adjust Segments' width individually. They should all be the same width.

In tight spaces like Small and Medium Side Panel, Floating Panels, Dialog, or on mobile touchpoints, Segmented Control should be set to use 100% of the parent container’s width.

Segmented Control aligned to the right of the related content.

Segmented control spanning across 100% of the Small Floating Panel's width.

In code, Segmented Control is by default set to 100% in width. In order to have it changed wrap it in a Container component. If a more advanced width logic is required, please contact the DS team.

Position

Place the Segmented Control above the related content to create a clear hierarchy and logical connection between the Control and the content that will be altered. It can be aligned to the left or right side of the related content area, but should never be centered in the content space.

Behavior

Mouse Interactions

Users can toggle to a different view by clicking on the enabled Segments.

Keyboard interactions

Usage / Behaviour / Keybord Interactions

Key	Interaction
Tab	Sets focus on the first enabled, not selected, Segment (as most of the time, the first Segment is selected by default; it will focus on the second one).
Tab x 2/3/…	Moves focus to the next enabled Segment.
Shift + Tab x 2/3/…	Moves focus back to the previous Segment.
Space or Enter	Activates focussed Segment.

Content

Maximum Segments

Don’t use more than six Segments: Segmented Control best fulfils its purpose with six or fewer Segments. If you need more, try using Radio Button Group or Select instead.