Switch

Basic switch

Switches are built with checkboxes under the hood, so their HTML closely mirrors that of checkboxes, including optional layout components.

Switches work by layering an invisible checkbox over the custom switch indicator. This preserves interactivity while giving you a completely customizable layer underneath.

Switches also include the switch attribute for browsers that support it. This provides haptic feedback when toggling the switch.

HTML

<div class="switch">
  <input type="checkbox" value="" id="switch" switch>
</div>

Label

Wrap the .switch in a <b-checkgroup> layout component and add your label. We use a custom element for layout here that sets some basic flexbox styling. Switches are checkboxes under the hood, so we reused the same custom element here.

Consider margin utilities for additional spacing, and flex utilities for alignment, especially when using small or large switches.

Small switch

Default switch

HTML

<b-checkgroup>
  <div class="switch switch-sm mt-1">
    <input type="checkbox" value="" id="switchSmLabel" switch>
  </div>
  <label for="switchSmLabel">Small switch</label>
</b-checkgroup>

<b-checkgroup>
  <div class="switch">
    <input type="checkbox" value="" id="switchMdLabel" switch>
  </div>
  <label for="switchMdLabel">Default switch</label>
</b-checkgroup>

Theme colors

Modify the appearance of checked checkboxes by adding the .checked-{color} class to the .switch element. This will set the checked background and border color to the theme color.

Example primary switch

Example accent switch

Example success switch

Example danger switch

Example warning switch

Example info switch

Example inverse switch

Example secondary switch

HTML

 <b-checkgroup>
  <div class="switch switch-sm mt-1 checked-primary">
    <input type="checkbox" value="" id="switchprimary" switch checked>
  </div>
  <label for="switchprimary">Example primary switch</label>
</b-checkgroup>
 <b-checkgroup>
  <div class="switch switch-sm mt-1 checked-accent">
    <input type="checkbox" value="" id="switchaccent" switch checked>
  </div>
  <label for="switchaccent">Example accent switch</label>
</b-checkgroup>
 <b-checkgroup>
  <div class="switch switch-sm mt-1 checked-success">
    <input type="checkbox" value="" id="switchsuccess" switch checked>
  </div>
  <label for="switchsuccess">Example success switch</label>
</b-checkgroup>
 <b-checkgroup>
  <div class="switch switch-sm mt-1 checked-danger">
    <input type="checkbox" value="" id="switchdanger" switch checked>
  </div>
  <label for="switchdanger">Example danger switch</label>
</b-checkgroup>
 <b-checkgroup>
  <div class="switch switch-sm mt-1 checked-warning">
    <input type="checkbox" value="" id="switchwarning" switch checked>
  </div>
  <label for="switchwarning">Example warning switch</label>
</b-checkgroup>
 <b-checkgroup>
  <div class="switch switch-sm mt-1 checked-info">
    <input type="checkbox" value="" id="switchinfo" switch checked>
  </div>
  <label for="switchinfo">Example info switch</label>
</b-checkgroup>
 <b-checkgroup>
  <div class="switch switch-sm mt-1 checked-inverse">
    <input type="checkbox" value="" id="switchinverse" switch checked>
  </div>
  <label for="switchinverse">Example inverse switch</label>
</b-checkgroup>
 <b-checkgroup>
  <div class="switch switch-sm mt-1 checked-secondary">
    <input type="checkbox" value="" id="switchsecondary" switch checked>
  </div>
  <label for="switchsecondary">Example secondary switch</label>
</b-checkgroup>

Disabled

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.

Disabled switch

HTML

<b-checkgroup>
  <div class="switch">
    <input type="checkbox" value="" id="switchDisabledLabel" switch disabled>
  </div>
  <label for="switchDisabledLabel">Disabled switch</label>
</b-checkgroup>

Sizes

Add a size modifier class to make your switch appear smaller or larger.

HTML

<div class="switch switch-sm">
  <input type="checkbox" value="" id="switchSizeSm" switch>
</div>
<div class="switch">
  <input type="checkbox" value="" id="switchSizeMd" switch>
</div>
<div class="switch switch-lg">
  <input type="checkbox" value="" id="switchSizeLg" switch>
</div>

CSS

Variables

SCSS

--switch-height: 1.25rem;
--switch-width: calc(var(--switch-height) * 1.5);
--switch-padding: .0625rem;
--switch-bg: var(--secondary-bg);
--switch-border-width: var(--border-width);
--switch-border-color: var(--border-color);
--switch-indicator-bg: var(--white);
--switch-checked-bg: var(--primary-base);
--switch-checked-border-color: var(--switch-checked-bg);
--switch-checked-indicator-bg: var(--white);
--switch-disabled-bg: var(--secondary-bg);
--switch-disabled-indicator-bg: var(--secondary-text);