Toggle

Toggles are an input element used to reflect a binary (true / false) choice that immediately takes effect after changing.

General Guidelines

A toggle is used to quickly switch between two possible states. The action occurs immediately when user switches the toggle setting. Toggles support two simple, opposite choices. For other selection components see checkbox or radio buttons.

Voice and Tone

Be as specific as you can with the least amount of words as you can in your label text to describe what the user is agreeing to, actioning on, or what value they are adding or activating when switching the toggle.

Grammer and Mechanics

  • Concise language
  • Sentence case is always used for labels

Label Text

The toggle label text appears when clarification is needed for user to understand the action they are taking. Use adjectives rather than verbs to describe labels and the state of the object affected.

Do’s and Don’ts

Do use labels to provide users context
Do place the negative (off) on the left and postive (on) on the right
Don't use checkboxes when switching an option/value on or off
Don't use more than two words in a label
Don't place label within the toggle itself

How and When to Use

Refer to the diagram below to help you figure out when to use the checkbox component versus another similar component.

A flowchart that includes the following flows. 1. You should use checkboxes, if you must restrict the answer response, if it is a true/false or on/off and it does not require an immediate action. 2. You should use toggles, if you must restrict the answer response, if it is a true/false or on/off and it does require an immediate action. 3.  You should use a dropdown, if you must restrict the answer response, if it is not true/false or on/off question and it requires complex or dynamic data. 4.  You should use a radio button, if you must restrict the answer response, if it is not true/false or on/off question and it does not require complex or dynamic data. 5. You should use a text field, if you do not have to restrict the answer response and data is less than 8 words. 6. You should use a text area, if you do not have to restrict the answer response and data is greater than 8 words.
Toggles are an input element used to reflect a binary (true / false) choice that immediately takes effect after changing.

States

Color

Variant Box Color
On Background
$toggle-fill=#4570A5 - #3F81D5 gradiant
$toggle-border=#3D6AA3
Off Background
$toggle-fill=#EEEEEE
$toggle-border=#E0E0E0
Circle
$toggle-fill=#F5F5F5
$toggle-border=radial gradient from #FFFFFF - #E3E3E3
box-shadow: 0px 2px 4px #000000 20% opacity
Focus
box-shadow: 0px 0px 4px #4371AD

Spacing and Typography

Toggles are an input element used to reflect a binary (true / false) choice that immediately takes effect after changing.

Examples

For details on when to use this component, please see the Usage tab.

<div class="iris-toggle">
    <input class="iris-toggle__input" type="checkbox" id="unicorns_enabled" />
    <label class="iris-toggle__label" for="unicorns_enabled" aria-label="Enable Unicorns">
        <span class="iris-toggle__left" aria-hidden="true">Off</span>
        <span class="iris-toggle__inner"></span>
        <span class="iris-toggle__right" aria-hidden="true">On</span>
    </label>
</div>

States

<div class="iris-toggle iris-toggle--disabled">
    <input class="iris-toggle__input" type="checkbox" id="disabled_example" disabled/>
    <label class="iris-toggle__label" for="disabled_example" aria-label="Disabled Example">
        <span class="iris-toggle__left" aria-hidden="true">I am</span>
        <span class="iris-toggle__inner"></span>
        <span class="iris-toggle__right" aria-hidden="true">Disabled</span>
    </label>
</div>

Accessibility

As always we want to keep all of the components in the application accessible. Please keep these notes in mind while using this component:

  • Each input MUST have a unique id and the corresponding label must have a for attribute in order to link the two together.
  • The aria-label attribute should be added to the label element to describe the intention to a screenreader.
  • Always add the aria-hidden attribute on the left and right labels to ensure the screenreader only reads the aria-label and not additional text.

Variables

The variables used in this component are as follows:

// Text variables
$toggle-label-default: $mine-shaft !default;
$toggle-label-active: $steel-blue !default;
$toggle-label-inactive: $dove-gray !default;

// Border variables
$toggle-inner-border-default: $alto !default;
$toggle-inner-border-active: $san-marino !default;
$toggle-inner-border-width: 0.5px !default;

// Box shadow variables
$toggle-box-shadow-default: 0 2px 3px 0 rgba(0, 0, 0, 0.5) !default;
$toggle-box-shadow-focus: 0 0 4px 2px $steel-blue !default;
$toggle-box-shadow-disabled: 0 0 4px 2px transparent !default;

// Background variables
$toggle-inner-background-default: $alto !default;
$toggle-inner-background-active: $steel-blue;
$toggle-inner-before-background-active: linear-gradient(to bottom, $steel-blue, $havelock-blue) !default;
$toggle-mechanism-background-default: $white !default;
$toggle-mechanism-background-active: $white !default;

// Padding variables
// This ensures the height matches the design. (11 x 2) x (20 x 2) = 22px x 40px
$toggle-inner-padding-default: 1.1rem 2rem !default;

// Font variables
$toggle-font-weight-inactive: $font-weight-standard !default;
$toggle-font-weight-active: $font-weight-standard !default;

// Offset variables
$toggle-mechanism-pixel-offset-off: 1px !default;
$toggle-mechanism-pixel-offset-on: 2px !default;

Themeability

Nothing is themeable in this component.

Variant: Standard | State: Static | Decorator: None

<div class="iris-toggle ">
    <input class="iris-toggle__input" type="checkbox" id="email_enabled" />
    <label class="iris-toggle__label" for="email_enabled" aria-label="Enable Email Alerts">
        <span class="iris-toggle__left" aria-hidden="true">Off</span>
        <span class="iris-toggle__inner"></span>
        <span class="iris-toggle__right" aria-hidden="true">On</span>
    </label>
</div>

Variant: Standard | State: Disabled | Decorator: None

<div class="iris-toggle iris-toggle--disabled">
    <input class="iris-toggle__input" type="checkbox" id="email_enabled" />
    <label class="iris-toggle__label" for="email_enabled" aria-label="Enable Email Alerts">
        <span class="iris-toggle__left" aria-hidden="true">Off</span>
        <span class="iris-toggle__inner"></span>
        <span class="iris-toggle__right" aria-hidden="true">On</span>
    </label>
</div>