Switch (Restyled Checkbox)

Amazium provides a custom-styled switch, which is simply a checkbox redesigned to function as a toggle switch. This makes it easy for users to enable or disable options with a modern, interactive UI.

Styled to resemble a traditional on/off switch
Works identically to a checkbox under the hood
Provides clear feedback on enabled/disabled states
Accessible and keyboard-navigable

To implement a switch, just use a checkbox input inside a div with the class .input--switch.

Default Switch

<fieldset>
  <div class="input input--switch">
    <span>
      <input type="checkbox" tabindex="" name="checkbox1" id="checkbox1" checked>
      <label for="checkbox1">Checkbox 1</label>
    </span>

    <span>
      <input type="checkbox" tabindex="" name="checkbox2" id="checkbox2">
      <label for="checkbox2">Checkbox 2</label>
    </span>
  </div>
  <p class="message">Sorry looks like you choose poorly.</p>
</fieldset>

Disabled Switch

<fieldset disabled>
  <div class="input input--switch">
    <span>
      <input type="checkbox" tabindex="" name="checkbox1" id="checkbox1" checked>
      <label for="checkbox1">Checkbox 1</label>
    </span>

    <span>
      <input type="checkbox" tabindex="" name="checkbox2" id="checkbox2">
      <label for="checkbox2">Checkbox 2</label>
    </span>
  </div>
  <p class="message">Sorry looks like you choose poorly.</p>
</fieldset>

Invalid Switch

<fieldset class="invalid">
  <div class="input input--switch">
    <span>
      <input type="checkbox" tabindex="" name="checkbox1" id="checkbox1" checked>
      <label for="checkbox1">Checkbox 1</label>
    </span>

    <span>
      <input type="checkbox" tabindex="" name="checkbox2" id="checkbox2">
      <label for="checkbox2">Checkbox 2</label>
    </span>
  </div>
  <p class="message">Sorry looks like you choose poorly.</p>
</fieldset>