Checkbox
The 2-state checkbox in its native format with style for vue
The checkbox class is a simple wrapper around the <input type="checkbox"> HTML element. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
<label class="checkbox">
<input type="checkbox">
Remember me
</label>
<label class="checkbox" disabled>
<input type="checkbox" disabled>
This disabled
</label>
<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 | Value | 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-mix, is-info,
is-success, is-warning, is-danger,
and any other colors you've set in the $colors list on Sass | — |
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 |
Checkbox Button
Name | Description | Type | Value | 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-mix, 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, Simply set one or multiple of these variables before importing Buval. Learn how.
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 |