Documentation

This site gathers documentation of my GitHub projects

Switch

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

Colors Yes
Sizes Yes
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 id attribute on input and 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 limitation the structure of the checkbox is different of the one provided as exxample 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

This page is designed with Bulma CSS framework.