Checkbox

Select a single or grouped options

<template>
    <section>
        <div class="field">
            <b-checkbox>Basic</b-checkbox>
        </div>
        <div class="field">
            <b-checkbox v-model="checkbox">
                {{ checkbox }}
            </b-checkbox>
        </div>
        <div class="field">
            <b-checkbox v-model="checkboxCustom"
                true-value="Yes"
                false-value="No">
                {{ checkboxCustom }}
            </b-checkbox>
        </div>
        <div class="field">
            <b-checkbox :indeterminate="true">
                Indeterminate
            </b-checkbox>
        </div>
        <div class="field">
            <b-checkbox disabled>Disabled</b-checkbox>
        </div>
    </section>
</template>

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

# Grouped (Array)

Just add the same v-model to multiple Checkboxes, and set a native-value.

Selection: [ "Flint" ]

<template>
    <section>
        <div class="block">
            <b-checkbox v-model="checkboxGroup"
                native-value="Silver">
                Silver
            </b-checkbox>
            <b-checkbox v-model="checkboxGroup"
                native-value="Flint">
                Flint
            </b-checkbox>
            <b-checkbox v-model="checkboxGroup"
                native-value="Vane">
                Vane
            </b-checkbox>
            <b-checkbox v-model="checkboxGroup"
                native-value="Billy" disabled>
                Billy
            </b-checkbox>
        </div>
        <p class="content">
            <b>Selection:</b>
            {{ checkboxGroup }}
        </p>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                checkboxGroup: ['Flint']
            }
        }
    }
</script>

# Sizes

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

# Types

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

# Checkbox Button

You have to wrap them on a Field.

Selection: []

<template>
    <section>
        <b-field>
            <b-checkbox-button v-model="checkboxGroup"
                native-value="Nope"
                type="is-danger">
                <b-icon icon="close"></b-icon>
                <span>Nope</span>
            </b-checkbox-button>

            <b-checkbox-button v-model="checkboxGroup"
                native-value="Yep"
                type="is-success">
                <b-icon icon="check"></b-icon>
                <span>Yep</span>
            </b-checkbox-button>

            <b-checkbox-button v-model="checkboxGroup"
                native-value="Default">
                Default
            </b-checkbox-button>

            <b-checkbox-button v-model="checkboxGroup"
                native-value="Disabled"
                disabled>
                Disabled
            </b-checkbox-button>
        </b-field>
        <p class="content">
            <b>Selection:</b>
            {{ checkboxGroup }}
        </p>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                checkboxGroup: []
            }
        }
    }
</script>

# API

Checkbox

Name
Description
Type
Values
Default
v-modelBinding value Any false
native-valueSame as native value Any
indeterminateSame as native indeterminate Boolean
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
requiredSame as native required Boolean false
nameSame as native name String
sizeSize of the control, optional String is-small, is-medium, is-large
typeType (color) of the control, 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

Checkbox Button

Name
Description
Type
Values
Default
v-modelBinding value Any
native-valueSame as native value Any
typeType (color) of the button when checked 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 Sassis-primary
disabledSame as native disabled Boolean false
nameSame as native name String
sizeSize of the button, optional String is-small, is-medium, is-large
expandedCheckbox button will be expanded (full-width) Boolean false

# Variables

You can use these variables to customize this component.

Name
Default
$checkbox-active-background-color$primary
$checkbox-background-colortransparent
$checkbox-border-color$grey
$checkbox-border-radius$radius
$checkbox-border-width2px
$checkbox-checkmark-color$primary-invert
$checkbox-size1.25em

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

Improve this page on GitHub