CSS reference - Bifrost

Design React CSS

Figma

Switch

Go to top

Also see /react/checkbox#switch-toggle

React component

Basic switch

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

HTML

<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

HTML

<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

HTML

<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

Alert state

Use .bf-checkbox-alert on the wrapper to apply alert state styling.

HTML

<label class="bf-checkbox bf-switch-wrapper bf-checkbox-alert">
  <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

Inactive state

Use .bf-checkbox-inactive on the wrapper instead of disabled when the user needs to know the switch exists but cannot be toggled — and why. See the checkbox docs for the full caveat: the class is styling + aria-disabled only — consumer must prevent the underlying <input> from actually changing state.

HTML

<label class="bf-checkbox bf-switch-wrapper bf-checkbox-inactive">
  <input type="checkbox" aria-disabled="true" checked />
  <span class="bf-switch">
    <span class="bf-switch-thumb">
      <i class="bf-checkbox-checked fa-solid fa-check"></i>
    </span>
  </span>
  Inactive switch
</label>

Inactive switch

Hidden label text

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

HTML

<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

Open 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>