When to Use Segmented Switches on Your UI

Stop Misusing Switch Components

Many designers are using segmented switches wrong. Segmented switches are not for selecting input on forms. They’re for switching views of contextual settings. The former occurs locally, while the latter occurs globally.

The example below shows the wrong and right way to use segmented switches. Notice how the bad design is using them to select form input. They’re using it as a substitute for radio buttons or mutually exclusive selections. 

This usage defeats the switching affordance because nothing is being “switched” or toggled. Instead, the user is merely selecting input for submission.

The good design uses the segmented switch to switch between two views of settings. The first view is “Document,” and the second view is “Audio.” These are different setting contexts that users can toggle. Switching a view changes the options for the entire settings screen.