User Manual

Switch

Component used to switch between two different states. It makes use of a checkbox component to simulate the state change.

Default


    
      

  
<div class="a-switch ">
  <input type="checkbox" class="a-switch__checkbox" id="switch-example" />

  <label for="switch-example" class="a-switch__container">
    <p class="a-switch__text a-switch__text--off">label1</p>

    <div class="a-switch__button">
      <span class="a-switch__outer"></span>

      <span class="a-switch__inner-container">
        <span class="a-switch__inner"></span>
      </span>
    </div>

    <p class="a-switch__text a-switch__text--on">label2</p>
  </label>
</div>

Disabled


    
      

  
<div class="a-switch is-disabled ">
  <input type="checkbox" class="a-switch__checkbox" id="switch-example" disabled/>

  <label for="switch-example" class="a-switch__container">
    <p class="a-switch__text a-switch__text--off">label1</p>

    <div class="a-switch__button">
      <span class="a-switch__outer"></span>

      <span class="a-switch__inner-container">
        <span class="a-switch__inner"></span>
      </span>
    </div>

    <p class="a-switch__text a-switch__text--on">label2</p>
  </label>
</div>

Modifiers

  • a-switch__text--off

    Used to style the text when the switch is in a turned off state

  • a-switch__text--on

    Used to style the text when the switch is in a turned on state

States

  • is-disabled

    Creates a disabled version of the switch atom