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.

Silver Flint Vane Billy

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

Small

Default

Medium

Large

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

Nope

Yep

Default

Disabled

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-model`	Binding value	Any	—	`false`
`native-value`	Same as native `value`	Any	—	—
`indeterminate`	Same as native `indeterminate`	Boolean	—	—
`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`
`required`	Same as native `required`	Boolean	—	`false`
`name`	Same as native `name`	String	—	—
`size`	Size of the control, optional	String	`is-small`, `is-medium`, `is-large`	—
`type`	Type (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	—
`aria-labelledby`	Accessibility label to establish relationship between the checkbox and control label	String	—	—
`input-id`	String to set the inner input id	String	—	—

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

Button

Name	Description	Type	Values	Default
`v-model`	Binding value	Any	—	—
`native-value`	Same as native `value`	Any	—	—
`type`	Type (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 Sass	`is-primary`
`disabled`	Same as native `disabled`	Boolean	—	`false`
`name`	Same as native `name`	String	—	—
`size`	Size of the button, optional	String	`is-small`, `is-medium`, `is-large`	—
`expanded`	Checkbox 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-color`	`transparent`
`$checkbox-border-color`	`$grey`
`$checkbox-border-radius`	`$radius`
`$checkbox-border-width`	`2px`
`$checkbox-checkmark-color`	`$primary-invert`
`$checkbox-size`	`1.25em`
`$checkbox-colors`	`$form-colors`

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

Improve this page on GitHub