Segmented Control

Quoting from Apple's Human Interface Guidelines, "a segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button. Within the control, all segments are equal in width. Like buttons, segments can contain text or images. Segmented controls are often used to display different views. In Maps, for example, a segmented control lets you switch between Map, Transit, and Satellite views."


Note #1: Please add tabindex="0" to your segmented-control-elements to make them selectable via keyboard and to keep our sites accessible.

Note #2: This element provides only the styling, without any interactivity. To provide interactivity, just make sure to apply the class segmented-control-element--active to the element that you want highlighted.

An example segmented control

Segment A
Segment B