Bootstrap 5 components designed for Vue.js
This component is part of the CoreUI for Vue.js UI components library, which offers all Bootstrap components designed to work seamlessly with Vue.js.
If you want to use Bootstrap 5 in a Vue.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.
Learn how to use CoreUI’s Vue Checkbox component with Bootstrap styles for flexible, framework-consistent UI.
Approach
Browser default checkboxes are replaced with the help of <CFormCheck>. Checkboxes are for selecting one or several options in a list.
Checks
<template>
<CFormCheck id="flexCheckDefault" label="Default checkbox" />
<CFormCheck id="flexCheckChecked" label="Checked checkbox" checked />
</template>
<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script>vModel
Single checkbox, boolean value.
<template>
<CFormCheck id="flexCheckDefaultVModel" label="Default checkbox" v-model="checked" />
<div>Checked: {{ checked }}</div>
</template>
<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script>We can also bind multiple checkboxes to the same array.
<template>
<CFormCheck id="lucas" value="Lucas" label="Lucas" v-model="checkedNames" />
<CFormCheck id="andrew" value="Andrew" label="Andrew" v-model="checkedNames" />
<CFormCheck id="anna" value="Anna" label="Anna" v-model="checkedNames" />
<div>Checked names: {{ checkedNames }}</div>
</template>
<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script>Indeterminate
Checkboxes can utilize the :indeterminate pseudo-class when manually set via indeterminate property.
<template>
<CFormCheck id="flexCheckIndeterminate" label="Indeterminate checkbox" indeterminate />
</template>
<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script>Disabled
Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.
<template>
<CFormCheck label="Disabled checkbox" disabled />
<CFormCheck label="Disabled checked checkbox" checked disabled />
</template>
<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script>Default (stacked)
By default, any number of checkboxes that are immediate sibling will be vertically stacked and appropriately spaced.
<template>
<CFormCheck id="defaultCheck1" label="Default checkbox" />
<CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled />
</template>
<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script>Inline
Group checkboxes on the same horizontal row by adding inline boolean property to any <CFormCheck>.
<template>
<CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
<CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
<CFormCheck inline id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled />
</template>
<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script>Reverse
Put your checkboxes on the opposite side by adding reverse boolean property.
<template>
<CFormCheck reverse id="reverseCheckbox1" value="option1" label="Reverse checkbox" />
<CFormCheck
reverse
id="reverseCheckbox2"
value="option2"
label="Disabled reverse checkbox"
disabled
/>
</template>
<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script>Without labels
Remember to still provide some form of accessible name for assistive technologies (for instance, using aria-label).
<template>
<CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
</template>
<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script>Toggle buttons
Create button-like checkboxes buttons by using button boolean property on the <CFormCheck> component. These toggle buttons can further be grouped in a button group if needed.
<template>
<CFormCheck
:button="{ color: 'primary' }"
id="btn-check"
autocomplete="off"
label="Single toggle"
/>
</template>
<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script><template>
<CFormCheck
:button="{ color: 'primary' }"
id="btn-check-2"
autocomplete="off"
label="Checked"
checked
/>
</template>
<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script><template>
<CFormCheck
:button="{ color: 'primary' }"
id="btn-check-3"
autocomplete="off"
label="Disabled"
disabled
/>
</template>
<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script>Outlined styles
Different variants of button, such at the various outlined styles, are supported.
<template>
<CFormCheck
:button="{ color: 'primary', variant: 'outline' }"
id="btn-check-outlined"
autocomplete="off"
label="Single toggle"
/>
<CFormCheck
:button="{ color: 'secondary', variant: 'outline' }"
id="btn-check-2-outlined"
autocomplete="off"
label="Checked"
checked
/>
</template>
<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script>