CSS reference - Bifrost

Switch

Basic switch

A switch is an alternative styling for <input type="checkbox">

<label class="bf-checkbox bf-switch-wrapper">
  <input type="checkbox" />
  <span class="bf-switch">
    <span class="bf-switch-thumb">
      <i class="bf-checkbox-checked fa-solid fa-check"></i>
    </span>
  </span>
  Switch label
</label>
<label class="bf-checkbox bf-switch-wrapper">
  <input type="checkbox" />
  <span class="bf-switch">
    <span class="bf-switch-thumb">
      <i class="bf-checkbox-checked fa-solid fa-check"></i>
    </span>
  </span>
  Switch label
</label>

Switch label

Right-align

<label class="bf-checkbox bf-switch-wrapper bf-checkbox-right">
  <input type="checkbox" />
  <span class="bf-switch">
    <span class="bf-switch-thumb">
      <i class="bf-checkbox-checked fa-solid fa-check"></i>
    </span>
  </span>
  Switch label
</label>
<label class="bf-checkbox bf-switch-wrapper bf-checkbox-right">
  <input type="checkbox" />
  <span class="bf-switch">
    <span class="bf-switch-thumb">
      <i class="bf-checkbox-checked fa-solid fa-check"></i>
    </span>
  </span>
  Switch label
</label>

Switch label

Button styling

<label class="bf-checkbox bf-switch-wrapper bf-checkbox-button">
  <input type="checkbox" />
  <span class="bf-switch">
    <span class="bf-switch-thumb">
      <i class="bf-checkbox-checked fa-solid fa-check"></i>
    </span>
  </span>
  Switch label
</label>
<label class="bf-checkbox bf-switch-wrapper bf-checkbox-button">
  <input type="checkbox" />
  <span class="bf-switch">
    <span class="bf-switch-thumb">
      <i class="bf-checkbox-checked fa-solid fa-check"></i>
    </span>
  </span>
  Switch label
</label>

Switch label

Hidden label text

Wrap the label text in .bf-checkbox-text and use .bf-checkbox-hidelabel on the outer wrapper.

<label class="bf-checkbox bf-switch-wrapper bf-checkbox-hidelabel">
  <input type="checkbox" />
  <span class="bf-switch">
    <span class="bf-switch-thumb">
      <i class="bf-checkbox-checked fa-solid fa-check"></i>
    </span>
  </span>
  <span class="bf-checkbox-text">Switch label</span>
</label>
<label class="bf-checkbox bf-switch-wrapper bf-checkbox-hidelabel">
  <input type="checkbox" />
  <span class="bf-switch">
    <span class="bf-switch-thumb">
      <i class="bf-checkbox-checked fa-solid fa-check"></i>
    </span>
  </span>
  <span class="bf-checkbox-text">Switch label</span>
</label>

Switch label

Sandbox

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/solid.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/regular.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/fontawesome.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css" /><link rel="stylesheet" href="styles.css" />

<div class="bf-page-padding">
  <label class="bf-checkbox bf-switch-wrapper">
    <input type="checkbox" />
    <span class="bf-switch">
      <span class="bf-switch-thumb">
        <i class="bf-checkbox-checked fa-solid fa-check"></i>
      </span>
    </span>
    Switch label
  </label>
</div>

Open Sandbox