Switch

Switch between two opposing states

<template>
    <section>
        <div class="field">
            <b-switch>Default</b-switch>
        </div>
        <div class="field">
            <b-switch v-model="isSwitched">
                {{ isSwitched }}
            </b-switch>
        </div>
        <div class="field">
            <b-switch v-model="isSwitchedCustom"
                true-value="Yes"
                false-value="No">
                {{ isSwitchedCustom }}
            </b-switch>
        </div>
        <div class="field">
            <b-switch disabled>Disabled</b-switch>
        </div>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                isSwitched: false,
                isSwitchedCustom: 'Yes'
            }
        }
    }
</script>

Types

<template>
    <section>
        <div class="field">
            <b-switch :value="true">
                Default
            </b-switch>
        </div>
        <div class="field">
            <b-switch :value="true"
            type="is-info">
                Info
            </b-switch>
        </div>
        <div class="field">
            <b-switch :value="true"
            type="is-success">
                Success
            </b-switch>
        </div>
        <div class="field">
            <b-switch :value="true"
            type="is-danger">
                Danger
            </b-switch>
        </div>
        <div class="field">
            <b-switch :value="true"
            type="is-warning">
                Warning
            </b-switch>
        </div>
    </section>
</template>

Sizes

<template>
    <section>
        <div class="field">
            <b-switch size="is-small">Small</b-switch>
        </div>
        <div class="field">
            <b-switch>Default</b-switch>
        </div>
        <div class="field">
            <b-switch size="is-medium">Medium</b-switch>
        </div>
        <div class="field">
            <b-switch size="is-large">Large</b-switch>
        </div>
    </section>
</template>

API

Name
Description
Type
Values
Default
typeType (color) of the switch, optional String is-white, is-black, is-light, is-dark, is-primary, is-info, is-success, is-warning, is-danger, and any other colors you've set in the $colors list on Sass
v-modelBinding value Any false
native-valueSame as native value Any
true-valueOverrides the returned value when it's checked Any true
false-valueOverrides the returned value when it's not checked Any false
disabledSame as native disabled Boolean false
nameSame as native name String
sizeSize of the control, optional String is-small, is-medium, is-large

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub