Skip to main content

Segmented Controls

A segmented control is a linear set of two or more segments, each of which functions as a button.

Lists Example


Segmented controls allow users to make a single selection from a set of 2–5 options, as a common alternative to radio buttons and dropdown menus. They clearly present all available options to users and are easy to use on mobile devices and tablets.


Use when

  • You need to provide closely related choices that affect an object, state, or view.
  • You need to reduce cognitive load and/or other selection controls are inadequate.

Don’t use when

  • Enabling actions, such as adding, removing, or editing content.
  • Filtering or navigating content (use Tabs instead).
  • There are too many segments causing crowding.
What's changed
Date Version Notes Contributors
01/16/2023 1.0.0 New component added. D. Bedick, E. Bohn, N. Cadsawan, E. Gunther, I. Perez, J. A. Provin Silva, L. Saenz, C. Starbird, R. Stillwell, S. Kaukonen, N. Byati