Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    Components

    Segmented Control

    Segmented Control allows users to toggle between two or more content sections within the same space on the screen.

    Overview

    Segmented controls allow users to toggle between alternate views of similar or related content, showing only one content section at a time.

    When to Use

    Segmented controls are frequently used to let users toggle between different formattings, like a grid view and a table view. They are also often used to narrow large content groups. For example, a messaging tool may use a segmented control to divide messages into three views such as “All,” “Read,” and “Unread.”

    When Not to Use

    Tabs: when navigating between distinct content areas like subpages, use tabs instead. Tabs follow the metaphor for sections in a filing cabinet, and two tabs wouldn’t contain the same sheet of paper, so the role of tabs in the information hierarchy is to separate content.

    Toggle: for binary actions or choices, such as “yes/no” or “on/off” use a toggle instead. A segmented control can be used for binary views, like switching between a grid and list view but should not be used as a binary input control.

    Formatting

    Anatomy

    Segmented control anatomy diagram
    1. Selected content tab: Only one control tab can be selected at a time and there should always be one selected.
    2. Content tab: Selectable container for each content view.
    3. Label: Text label or icon that describes the content view

     

    Width

    Each content tab in the group should be the same width. The content tab with the longest text label should have at minimum 16px spacing to the right of the label.

     

    Placement

    Place the segmented control above the content area to create a clear hierarchy for the section that the segment control controls. It can be aligned to the left or right side of the content area but should never be centered in the content space.

    Content

    Main Elements

    Text label

    • Be concise and specific and limit text labels to two to three words.
    • Text labels should clearly communicate the view users will see and the content contained in the view.