Checkbox

Select a single or grouped options

<template>
    <section>
        <b-field>
            <b-checkbox>Basic</b-checkbox>
        </b-field>
        <b-field>
            <b-checkbox v-model="checkbox">
                {{ checkbox }}
            </b-checkbox>
        </b-field>
        <b-field>
            <b-checkbox v-model="checkboxCustom"
                true-value="Yes"
                false-value="No">
                {{ checkboxCustom }}
            </b-checkbox>
        </b-field>
        <b-field>
            <b-checkbox :indeterminate="true">
                Indeterminate
            </b-checkbox>
        </b-field>
        <b-field>
            <b-checkbox disabled>Disabled</b-checkbox>
        </b-field>
    </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>
        <b-field>
            <b-checkbox size="is-small">Small</b-checkbox>
        </b-field>
        <b-field>
            <b-checkbox>Default</b-checkbox>
        </b-field>
        <b-field>
            <b-checkbox size="is-medium">Medium</b-checkbox>
        </b-field>
        <b-field>
            <b-checkbox size="is-large">Large</b-checkbox>
        </b-field>
    </section>
</template>

# Types

<template>
    <section>
        <b-field>
            <b-checkbox :value="true">
                Default
            </b-checkbox>
        </b-field>
        <b-field>
            <b-checkbox :value="true"
            type="is-info">
                Info
            </b-checkbox>
        </b-field>
        <b-field>
            <b-checkbox :value="true"
            type="is-success">
                Success
            </b-checkbox>
        </b-field>
        <b-field>
            <b-checkbox :value="true"
            type="is-danger">
                Danger
            </b-checkbox>
        </b-field>
        <b-field>
            <b-checkbox :value="true"
            type="is-warning">
                Warning
            </b-checkbox>
        </b-field>
    </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 valueAnyfalse
native-valueSame as native valueAny
indeterminateSame as native indeterminateBoolean
true-valueOverrides the returned value when it's checkedAnytrue
false-valueOverrides the returned value when it's not checkedAnyfalse
disabledSame as native disabledBooleanfalse
requiredSame as native requiredBooleanfalse
nameSame as native nameString
sizeSize of the control, optionalStringis-small, is-medium, is-large
typeType (color) of the control, optionalStringis-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

Button

Name
Description
Type
Values
Default
v-modelBinding valueAny
native-valueSame as native valueAny
typeType (color) of the button when checkedStringis-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 disabledBooleanfalse
nameSame as native nameString
sizeSize of the button, optionalStringis-small, is-medium, is-large
expandedCheckbox button will be expanded (full-width)Booleanfalse

# 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
$checkbox-colors$form-colors

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

Improve this page on GitHub