Documentation

Everything you need to start with Bulma-extensions.

Switch

Display the classic checkbox as a switch button with different colors, sizes, and states

View on Github
NPM Package 2.0.0
Colors Yes
Sizes Yes
Javascript No
Variables Yes 
<div class="field">
  <input id="switchExample" type="checkbox" name="switchExample" class="switch" checked="checked">
  <label for="switchExample">Switch example</label>
</div>

Use is-rtl to display a right-to-left design of checkbox (text at left)


<div class="field">
  <input id="switchRtlExample" type="checkbox" name="switchRtlExample" class="switch is-rtl" checked="checked">
  <label for="switchRtlExample">Switch example</label>
</div>

Don't forget to set the id attribute on input and the for attribute on label with the same value to get it work. This will link the label to the checkbox and then handle the click.


Please note that due to CSS limitations the structure of the checkbox is different than the one provided as example in Bulma's documentation.
(Input is not wrapped by the label)

Colors # 

<div class="field">
  <input id="switchColorDefault" type="checkbox" name="switchColorDefault" class="switch" checked="checked">
  <label for="switchColorDefault">Switch default</label>
</div>

<div class="field">
  <input id="switchColorSuccess" type="checkbox" name="switchColorSuccess" class="switch is-success" checked="checked">
  <label for="switchColorSuccess">Switch success</label>
</div>

<div class="field">
  <input id="switchColorWarning" type="checkbox" name="switchColorWarning" class="switch is-warning" checked="checked">
  <label for="switchColorWarning">Switch warning</label>
</div>

<div class="field">
  <input id="switchColorDanger" type="checkbox" name="switchColorDanger" class="switch is-danger" checked="checked">
  <label for="switchColorDanger">Switch danger</label>
</div>

<div class="field">
  <input id="switchColorInfo" type="checkbox" name="switchColorInfo" class="switch is-info" checked="checked">
  <label for="switchColorInfo">Switch info</label>
</div>

Sizes # 

<div class="field">
  <input id="switchSmall" type="checkbox" name="switchSmall" class="switch is-small">
  <label for="switchSmall">Switch small</label>
</div>

<div class="field">
  <input id="switchNormal" type="checkbox" name="switchNormal" class="switch">
  <label for="switchNormal">Switch</label>
</div>

<div class="field">
  <input id="switchMedium" type="checkbox" name="switchMedium" class="switch is-medium">
  <label for="switchMedium">Switch medium</label>
</div>

<div class="field">
  <input id="switchLarge" type="checkbox" name="switchLarge" class="switch is-large">
  <label for="switchLarge">Switch large</label>
</div>

Styles

Thin

<div class="field">
  <input id="switchThinColorDefault" type="checkbox" name="switchThinColorDefault" class="switch is-thin" checked="checked">
  <label for="switchThinColorDefault">Switch default</label>
</div>

<div class="field">
  <input id="switchThinColorSuccess" type="checkbox" name="switchThinColorSuccess" class="switch is-thin is-success" checked="checked">
  <label for="switchThinColorSuccess">Switch success</label>
</div>

<div class="field">
  <input id="switchThinColorWarning" type="checkbox" name="switchThinColorWarning" class="switch is-thin is-warning" checked="checked">
  <label for="switchThinColorWarning">Switch warning</label>
</div>

<div class="field">
  <input id="switchThinColorDanger" type="checkbox" name="switchThinColorDanger" class="switch is-thin is-danger" checked="checked">
  <label for="switchThinColorDanger">Switch danger</label>
</div>

<div class="field">
  <input id="switchThinColorInfo" type="checkbox" name="switchThinColorInfo" class="switch is-thin is-info" checked="checked">
  <label for="switchThinColorInfo">Switch info</label>
</div>

Rounded

<div class="field">
  <input id="switchRoundedDefault" type="checkbox" name="switchRoundedDefault" class="switch is-rounded" checked="checked">
  <label for="switchRoundedDefault">Switch rounded default</label>
</div>

<div class="field">
  <input id="switchRoundedSuccess" type="checkbox" name="switchRoundedSuccess" class="switch is-rounded is-success" checked="checked">
  <label for="switchRoundedSuccess">Switch rounded success</label>
</div>

<div class="field">
  <input id="switchRoundedWarning" type="checkbox" name="switchRoundedWarning" class="switch is-rounded is-warning" checked="checked">
  <label for="switchRoundedWarning">Switch rounded warning</label>
</div>

<div class="field">
  <input id="switchRoundedDanger" type="checkbox" name="switchRoundedDanger" class="switch is-rounded is-danger" checked="checked">
  <label for="switchRoundedDanger">Switch rounded danger</label>
</div>

<div class="field">
  <input id="switchRoundedInfo" type="checkbox" name="switchRoundedInfo" class="switch is-rounded is-info" checked="checked">
  <label for="switchRoundedInfo">Switch rounded info</label>
</div>

Outlined

<div class="field">
  <input id="switchOutlinedDefault" type="checkbox" name="switchOutlinedDefault" class="switch is-outlined" checked="checked">
  <label for="switchOutlinedDefault">Switch outlined default</label>
</div>

<div class="field">
  <input id="switchOutlinedSuccess" type="checkbox" name="switchOutlinedSuccess" class="switch is-outlined is-success" checked="checked">
  <label for="switchOutlinedSuccess">Switch outlined success</label>
</div>

<div class="field">
  <input id="switchOutlinedWarning" type="checkbox" name="switchOutlinedWarning" class="switch is-outlined is-warning" checked="checked">
  <label for="switchOutlinedWarning">Switch outlined warning</label>
</div>

<div class="field">
  <input id="switchOutlinedDanger" type="checkbox" name="switchOutlinedDanger" class="switch is-outlined is-danger" checked="checked">
  <label for="switchOutlinedDanger">Switch outlined danger</label>
</div>

<div class="field">
  <input id="switchOutlinedInfo" type="checkbox" name="switchOutlinedInfo" class="switch is-outlined is-info" checked="checked">
  <label for="switchOutlinedInfo">Switch outlined info</label>
</div>

Mixed

<div class="field">
  <input id="switchRoundedOutlinedDefault" type="checkbox" name="switchRoundedOutlinedDefault" class="switch is-rounded is-outlined" checked="checked">
  <label for="switchRoundedOutlinedDefault">Switch rounded outlined default</label>
</div>

<div class="field">
  <input id="switchRoundedOutlinedSuccess" type="checkbox" name="switchRoundedOutlinedSuccess" class="switch is-rounded is-outlined is-success" checked="checked">
  <label for="switchRoundedOutlinedSuccess">Switch rounded outlined success</label>
</div>

<div class="field">
  <input id="switchRoundedOutlinedWarning" type="checkbox" name="switchRoundedOutlinedWarning" class="switch is-rounded is-outlined is-warning" checked="checked">
  <label for="switchRoundedOutlinedWarning">Switch rounded outlined warning</label>
</div>

<div class="field">
  <input id="switchRoundedOutlinedDanger" type="checkbox" name="switchRoundedOutlinedDanger" class="switch is-rounded is-outlined is-danger" checked="checked">
  <label for="switchRoundedOutlinedDanger">Switch rounded outlined danger</label>
</div>

<div class="field">
  <input id="switchRoundedOutlinedInfo" type="checkbox" name="switchRoundedOutlinedInfo" class="switch is-rounded is-outlined is-info" checked="checked">
  <label for="switchRoundedOutlinedInfo">Switch rounded outlined info</label>
</div>

<div class="field">
  <input id="switchThinRoundedOutlinedDefault" type="checkbox" name="switchThinRoundedOutlinedDefault" class="switch is-thin is-rounded is-outlined" checked="checked">
  <label for="switchThinRoundedOutlinedDefault">Switch Thin rounded outlined default</label>
</div>

<div class="field">
  <input id="switchThinRoundedOutlinedSuccess" type="checkbox" name="switchThinRoundedOutlinedSuccess" class="switch is-thin is-rounded is-outlined is-success" checked="checked">
  <label for="switchThinRoundedOutlinedSuccess">Switch Thin rounded outlined success</label>
</div>

<div class="field">
  <input id="switchThinRoundedOutlinedWarning" type="checkbox" name="switchThinRoundedOutlinedWarning" class="switch is-thin is-rounded is-outlined is-warning" checked="checked">
  <label for="switchThinRoundedOutlinedWarning">Switch Thin rounded outlined warning</label>
</div>

<div class="field">
  <input id="switchThinRoundedOutlinedDanger" type="checkbox" name="switchThinRoundedOutlinedDanger" class="switch is-thin is-rounded is-outlined is-danger" checked="checked">
  <label for="switchThinRoundedOutlinedDanger">Switch Thin rounded outlined danger</label>
</div>

<div class="field">
  <input id="switchThinRoundedOutlinedInfo" type="checkbox" name="switchThinRoundedOutlinedInfo" class="switch is-thin is-rounded is-outlined is-info" checked="checked">
  <label for="switchThinRoundedOutlinedInfo">Switch Thin rounded outlined info</label>
</div>

States

Disabled

<div class="field">
  <input id="switchColorDefault" type="checkbox" name="switchColorDefault" class="switch" checked="checked" disabled>
  <label for="switchColorDefault">Switch default</label>
</div>

<div class="field">
  <input id="switchColorSuccess" type="checkbox" name="switchColorSuccess" class="switch is-success" checked="checked" disabled>
  <label for="switchColorSuccess">Switch success</label>
</div>

<div class="field">
  <input id="switchColorWarning" type="checkbox" name="switchColorWarning" class="switch is-warning" checked="checked" disabled>
  <label for="switchColorWarning">Switch warning</label>
</div>

<div class="field">
  <input id="switchColorDanger" type="checkbox" name="switchColorDanger" class="switch is-danger" checked="checked" disabled>
  <label for="switchColorDanger">Switch danger</label>
</div>

<div class="field">
  <input id="switchColorInfo" type="checkbox" name="switchColorInfo" class="switch is-info" checked="checked" disabled>
  <label for="switchColorInfo">Switch info</label>
</div>

Variables #

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name Default value
Name Default value
$switch-background $grey-light
$switch-background-active $primary
$switch-radius $radius
$switch-margin 1rem
$switch-paddle-background $white
$switch-paddle-offset 0.25rem
$switch-paddle-transition all 0.25s ease-out
$switch-focus 1px dotted $grey-light