CSS reference - Bifrost

Checkbox

Custom icons

Since it's practically impossible to style the native browser checkbox element, we have opted to replace it with custom icons instead.

The .bf-checkbox-unchecked icon will be hidden as long as the checkbox is :checked (and vice versa for .bf-checkbox-checked).

We recommend fa-solid fa-square-check when checked, and fa-regular fa-square for the unchecked state.

HTML

<div class="bfl-inline">
  <label class="bf-checkbox">
    <input type="checkbox" />
    <span class="bf-checkbox-icon">
      <i class="bf-checkbox-checked fa-solid fa-square-check"></i>
      <i class="bf-checkbox-unchecked fa-regular fa-square"></i>
    </span>
    Checkbox left
  </label>
  <label class="bf-checkbox bf-checkbox-right">
    <input type="checkbox" />
    <span class="bf-checkbox-icon">
      <i class="bf-checkbox-checked fa-solid fa-square-check"></i>
      <i class="bf-checkbox-unchecked fa-regular fa-square"></i>
    </span>
    Checkbox right
  </label>
</div>

Checkbox left Checkbox right

Button styling

HTML

<label class="bf-checkbox bf-checkbox-button">
  <input type="checkbox" />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-square-check"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-square"></i>
  </span>
  Checkbox button styling
</label>

<label class="bf-checkbox bf-checkbox-button">
  <input type="radio" />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
  </span>
  Radio button styling
</label>

Checkbox button styling Radio button styling

Small button size

HTML

<label class="bf-checkbox bf-checkbox-button bf-checkbox-small">
  <input type="checkbox" />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-square-check"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-square"></i>
  </span>
  Small button size
</label>

Small button size

Hidden label

Apply .bf-checkbox-hidelabel on the wrapper
Omit the text inside <label>
Apply an aria-label to the <input> for accessibility

HTML

<label class="bf-checkbox bf-checkbox-hidelabel">
  <input type="checkbox" aria-label="Checkbox label" />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-square-check"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-square"></i>
  </span>
</label>

Alert state

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

HTML

<label class="bf-checkbox bf-checkbox-alert">
  <input type="checkbox" />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-square-check"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-square"></i>
  </span>
  Checkbox alert state
</label>

Checkbox alert state

Inactive state

Use .bf-checkbox-inactive on the wrapper instead of disabled when the user needs to know the control exists but cannot be toggled — and why. The icon is dimmed while the control stays focusable and screen-readable. Also covers the switch and card variants via the same class.

Set aria-disabled="true" on the <input> so assistive tech announces it as disabled. The class is styling only; to actually block toggling, the consumer must prevent the underlying <input> from changing state (e.g. controlled React state, or a change listener that calls event.preventDefault() and restores the previous value).

HTML

<label class="bf-checkbox bf-checkbox-inactive">
  <input type="checkbox" aria-disabled="true" />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-square-check"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-square"></i>
  </span>
  Inactive checkbox
</label>

Inactive checkbox

Disabled

HTML

<label class="bf-checkbox">
  <input type="checkbox" disabled />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-square-check"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-square"></i>
  </span>
  Disabled
</label>
<label class="bf-checkbox">
  <input type="checkbox" disabled checked />
  <span class="bf-checkbox-icon">
    <i class="bf-checkbox-checked fa-solid fa-square-check"></i>
    <i class="bf-checkbox-unchecked fa-regular fa-square"></i>
  </span>
  Disabled checked
</label>

Disabled Disabled checked

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">
    <input type="checkbox" />
    <span class="bf-checkbox-icon">
      <i class="bf-checkbox-checked fa-solid fa-square-check"></i>
      <i class="bf-checkbox-unchecked fa-regular fa-square"></i>
    </span>
    Checkbox label
  </label>
</div>