Skip to content

Toggle13.10.5

Toggles allow a selection to be turned on or off


$ npm i @if-design-system/toggle@13.10.5

To find out more about when to use selection controls, read this section in the style guide about selection control patterns.
Edit this section

Overview

Toggles are used for binary actions that occur immediately after the user "flips" the Toggle switch. They are commonly used for "On/Off" situations.

Edit this section

Usage

Toggles

For some actions, either a toggle switch or a check box might work. To decide which control would work better, follow these tips:

  1. Use a toggle switch for binary settings when changes become effective immediately after the user changes them
  2. Use checkboxes for optional ("nice to have") items
  3. Use a checkbox when the user has to perform extra steps for changes to be effective. For example, if the user must click a "submit" or "next" button to apply changes, use a check box
  4. Use checkboxes when the user can select multiple items that are related to a single setting or feature

Best Practice

The options that require instant response are best selected using a toggle switch.

Sizing

With given attributes (data-size), you can vary the size of the selection control.

Fluid
Largest
Larger
Large
Medium
Small
Smallest
Edit this section

Behaviours

States

Static

A helpful text
Static with help text

Checked

Disabled

Focused

Invalid

A validation error
Invalid with error message

Invalid + Focus

Checked + Focus

Checked + Invalid

Checked + Disabled

Edit this section

Anatomy

Toggles
  1. Always vertical
  2. Clear, meaningful label that describes what to toggle
Edit this section

Implementation

[...]
<div class="if input-wrapper">
  <fieldset class="if">
    <legend class="if">A paved road or a path?</legend>
    <div class="if toggle-controls">
      <input
        data-size="larger"
        checked
        class="if toggle"
        id="selection-controls-implementation-toggle-1"
        type="checkbox"
      />
      <label class="if" for="selection-controls-implementation-toggle-1">Show the favorites bar</label>
      <input
        data-size="larger"
        class="if toggle"
        id="selection-controls-implementation-toggle-2"
        type="checkbox"
      />
      <label class="if" for="selection-controls-implementation-toggle-2">Auto-brightness</label>
      <span class="if input-error" aria-live="polite">A validation error</span>
      <span class="if input-help">A helpful text</span>
    </div>
  </fieldset>
</div>
[...]
Edit this section

Contact us