Anatomy

 Highlights the currently selected option.
 The text inside each segment that describes the option.
 The outer structure that holds all segments together.

Segmented Switch Type

Segmented Switch Type

Large (Default)

Suitable for more prominent designs or larger spaces.

Small

Suitable for compact designs or limited space.

Segmented Switch State

Segmented Switch Variant

Text Only

Use this variant when you want to display only text without any icons. It is best for cases where you want the options to be purely text-based, offering a clean and minimalistic approach. This variant is ideal for simple choices where an icon might not add meaningful context.

Left Icon

Use this variant when you want to add an icon to the left of the text. This is helpful when the icon helps to clarify or represent the option’s purpose. It’s useful for indicating the type of action or content the user is selecting.

Right Icon

The icon in this variant can be replaced with other elements, such as a hint. A hint typically refers to a numerical indicator, like showing the number of outstanding tasks or notifications. This element provides additional context, such as the number of pending actions that the user should be aware of, making the interaction more informative.

You can use hint on segmented switch. Use hints to show the number of tasks left (e.g., "3 tasks remaining").

Icon Only

Use this variant when you only need to display an icon without any text. It’s ideal for situations where the icon alone is clear enough to communicate the action or option. This variant is used when space is limited or when the icon is intuitive enough to stand alone.

Since the icon is the only visual element, it is recommended to use a tooltip for accessibility. A tooltip will provide a text explanation of what the button does when the user hovers over it, ensuring clarity for users who might not immediately recognize the icon.

Invert Color Usage

The segmented switch has an invert color variant to ensure visibility based on the background:

• Invert Color On: Use when the background is white. The segmented switch will use a light background for active states and a white background for inactive states.
• Invert Color Off: Use when the background is light. The segmented switch will use a white background for active states and a light background for inactive states.

Select the appropriate variant based on the background to maintain contrast and usability.

Usage

Usage Recommendation:

• Use the segmented switch when users need to toggle between mutually exclusive options within a small dataset (e.g., switching between tabs like "Monthly" and "Yearly").
• When you need to display distinct views for varying content within the same context.
• During a user journey (e.g., filling out a form or adjusting settings), utilize segmented switch to structure related content and keep the user within the main page.

Examples of Appropriate Use:

• Switching between views (e.g., "List" vs. "Grid").
• Filter options (e.g., "All", "Completed", "Pending").

Accessibility

If the number of options exceeds the available space or the labels are too long to fit in a single row, truncate text to ensure proper alignment. The segmented switch is not designed to accommodate scrolling.

Content

• Keep labels short, ideally one to three words.
• Use sentence case for text labels (e.g., "Need Approval" instead of "NEED APPROVAL").
• Ensure labels are distinct and unambiguous. Don’t make unclear label.
• Use consistent label styles within the same switch.