Skip to main content

Segmented Controls

A segmented control is a navigation or input element that presents a set of mutually exclusive options in a segmented layout.

Overview

The purpose of segmented controls is to provide users with a clear and visually appealing way to choose from a set of mutually exclusive options. They simplify navigation and input by presenting options in a compact and easily scannable format.

Segmented controls are often used to allow users to switch between different views, filter content, or make a selection from a set of options. Each segment functions as a separate button or tab, and when one segment is selected, the others are automatically deselected.

A segmented control with two segments.

Resources

Available
Available
Web Components
Planned
Available
Available
iOS JustUI [UI Kit]
Available
iOS PIE [SwiftUI]
Available
Android [XML views]
Beta
Android [Jetpack compose]
TBC