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

    Toggle

    A toggle is used to quickly switch between two possible states. They are commonly used for “on/off” switches.

    Overview

    Toggle is a control that is used to quickly switch between two possible states. Toggles are only used for these binary actions that occur immediately after the user “flips the switch”. They are commonly used for “on/off” switches.

    Toggle component example

    Usage

    Toggles are commonly used in forms and can appear within full pages of information that are not restricted in space. Toggles are required to display visible label and action text.

    Toggles are the preferred way to adjust settings. They're used to control binary options – think On/Off or True/False.

    When to Use

    • Switch a single item on or off
    • Immediately activate or deactivate something

    Content

    Label Text
    • Label text must accompany a toggle to further clarify the action that the toggle performs.
    Action Text
    • Use text to describe the binary action of toggle so that the action is clear. Action text must be three words or less and is displayed on the side of a toggle.
    Language
    • Use adjectives rather than verbs to describe actions and the state of the object affected.

    Behaviors

    Tapping a switch turns it on or off. It's a two-step action: selection and execution. Switches work independently and don't control other switches.