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>
        <div class="field">
            <b-switch 
                v-model="lightMode"
                passive-type='is-dark'
                type='is-warning'>
                {{ lightMode ? "Light Mode" : "Dark Mode" }}
            </b-switch>
        </div>
    </section>
</template>

<script>
export default {
    data() {
        return {
            lightMode: false
        }
    }
}
</script>

# 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>

# Styles

<template>
    <section>
        <b-field grouped>
            <b-switch v-model="isRounded">Rounded</b-switch>
            <b-switch v-model="isOutlined">Outlined</b-switch>
        </b-field>
        <b-field label="Type">
            <b-select expanded v-model="type" placeholder="Type">
                <option value="null">Default</option>
                <option value="is-primary">Primary</option>
                <option value="is-success">Success</option>
                <option value="is-warning">Warning</option>
                <option value="is-danger">Danger</option>
            </b-select>
        </b-field>
        <b-field label="Passive Type">
            <b-select expanded v-model="passiveType" placeholder="Passive Type">
                <option value="null">Default</option>
                <option value="is-primary">Primary</option>
                <option value="is-success">Success</option>
                <option value="is-warning">Warning</option>
                <option value="is-danger">Danger</option>
            </b-select>
        </b-field>
        <b-field label="Size">
            <b-select expanded v-model="size">
                <option value="">Default</option>
                <option value="is-small">is-small</option>
                <option value="is-medium">is-medium</option>
                <option value="is-large">is-large</option>
            </b-select>
        </b-field>
        <b-switch
            :rounded="isRounded"
            :outlined="isOutlined"
            :size="size"
            :type="type"
            :passive-type='passiveType'>Sample</b-switch>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                size: '',
                type: null,
                passiveType: null,
                isRounded: false,
                isOutlined: false,
            }
        }
    }
</script>

# 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
passive-typeType (color) of the switch when switch is passive, 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
roundedRounded style Boolean true
outlinedOutlined style Boolean false

# Variables

You can use these variables to customize this component.

Name
Default
$switch-width-number2.75
$switch-width$switch-width-number * 1em
$switch-padding0.2em
$switch-active-background-color$primary

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

Improve this page on GitHub