Switch

Switch between two opposing states

Default

false

Yes

Disabled

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

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

# Types

<template>
    <section>
        <b-field>
            <b-switch :value="true">
                Default
            </b-switch>
        </b-field>
        <b-field>
            <b-switch :value="true"
            type="is-info">
                Info
            </b-switch>
        </b-field>
        <b-field>
            <b-switch :value="true"
            type="is-success">
                Success
            </b-switch>
        </b-field>
        <b-field>
            <b-switch :value="true"
            type="is-danger">
                Danger
            </b-switch>
        </b-field>
        <b-field>
            <b-switch :value="true"
            type="is-warning">
                Warning
            </b-switch>
        </b-field>
        <b-field>
            <b-switch
                v-model="lightMode"
                passive-type='is-dark'
                type='is-warning'>
                {{ lightMode ? "Light Mode" : "Dark Mode" }}
            </b-switch>
        </b-field>
    </section>
</template>

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

# Sizes

Small

Default

Medium

Large

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

# Styles

RoundedOutlined

Type

Passive Type

Size

Left Label

FalseTrue

Sample

<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-field label="Left Label">
            <b-radio v-model='leftLabel' :native-value='false'>False</b-radio>
            <b-radio v-model='leftLabel' :native-value='true'>True</b-radio>
        </b-field>
        <b-switch
            :rounded="isRounded"
            :outlined="isOutlined"
            :size="size"
            :type="type"
            :left-label='leftLabel'
            :passive-type='passiveType'>Sample</b-switch>
    </section>
</template>

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

# API

Name	Description	Type	Values	Default
`type`	Type (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-type`	Type (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-model`	Binding value	Any	—	`false`
`native-value`	Same as native `value`	Any	—	—
`true-value`	Overrides the returned value when it's checked	Any	—	`true`
`false-value`	Overrides the returned value when it's not checked	Any	—	`false`
`disabled`	Same as native `disabled`	Boolean	—	`false`
`name`	Same as native `name`	String	—	—
`size`	Size of the control, optional	String	`is-small`, `is-medium`, `is-large`	—
`rounded`	Rounded style	Boolean	—	`true`
`outlined`	Outlined style	Boolean	—	`false`
`aria-labelledby`	Accessibility label to establish relationship between the switch and control label	String	—	—

Name	Description	Parameters
`input`	Triggers when the value of the switch is changed	`value: Boolean`
`[any].native`	Listen to any event using this syntax, e.g `click.native`	`event: $event`

# Variables

You can use these variables to customize this component.

Name	Default
`$switch-width-number`	`2.75`
`$switch-width`	`$switch-width-number * 1em`
`$switch-padding`	`0.2em`
`$switch-active-background-color`	`$primary`
`$switch-colors`	`$form-colors`

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

Improve this page on GitHub