Bulma Switch

A toggle switch extension for Bulma.

The Switch extension replaces the native checkbox with a sleek toggle-switch control. It inherits Bulma's full color system and sizing scale, and supports shape variants (rounded, thin), an outlined style, RTL layout, and disabled states — all with a smooth animated paddle.

Basic Switch

Add the .switch class and type="checkbox" to your <input>. The <label> immediately following must reference the input via for.

<input id="switchBasic1" type="checkbox" name="switchBasic1" class="switch">
<label for="switchBasic1">Off / On</label>
<input id="switchBasic2" type="checkbox" name="switchBasic2" class="switch" checked>
<label for="switchBasic2">Checked by default</label>
<input id="switchBasic3" type="checkbox" name="switchBasic3" class="switch" disabled>
<label for="switchBasic3">Disabled</label>
<input id="switchBasic4" type="checkbox" name="switchBasic4" class="switch" checked disabled>
<label for="switchBasic4">Checked disabled</label>

Color Variations

Apply any Bulma color modifier like is-primary, is-success, etc. to the active track colour. 

<input id="swClrPrimary" type="checkbox" name="swClrPrimary" class="switch is-primary" checked>
<label for="swClrPrimary">Primary</label>
<input id="swClrInfo" type="checkbox" name="swClrInfo" class="switch is-info" checked>
<label for="swClrInfo">Info</label>
<input id="swClrSuccess" type="checkbox" name="swClrSuccess" class="switch is-success" checked>
<label for="swClrSuccess">Success</label>
<input id="swClrWarning" type="checkbox" name="swClrWarning" class="switch is-warning" checked>
<label for="swClrWarning">Warning</label>
<input id="swClrDanger" type="checkbox" name="swClrDanger" class="switch is-danger" checked>
<label for="swClrDanger">Danger</label>
<input id="swClrLink" type="checkbox" name="swClrLink" class="switch is-link" checked>
<label for="swClrLink">Link</label>

Sizing

Control the size with is-small, is-medium, or is-large. 

<input id="swSzSmall" type="checkbox" name="swSzSmall" class="switch is-small is-primary" checked>
<label for="swSzSmall">Small</label>
<input id="swSzNormal" type="checkbox" name="swSzNormal" class="switch is-primary" checked>
<label for="swSzNormal">Normal</label>
<input id="swSzMedium" type="checkbox" name="swSzMedium" class="switch is-medium is-primary" checked>
<label for="swSzMedium">Medium</label>
<input id="swSzLarge" type="checkbox" name="swSzLarge" class="switch is-large is-primary" checked>
<label for="swSzLarge">Large</label>

Rounded

Add is-rounded to give the track fully rounded ends and a circular paddle.

Thin Track

Add is-thin to collapse the track into a thin line with a floating paddle.

Outlined

Add is-outlined for a transparent track with a coloured border and paddle.

RTL Support

Add is-rtl to mirror the switch for right-to-left layouts.