To use the custom checkbox controls you need to import the custom made component:
import {Checkbox} from 'src/components'

Global usage

Vue.component(, Checkbox)

For local usage

export default {
  components: {
    []: Checkbox

Custom checkboxes

       <p-checkbox v-model="unchecked">Unchecked</p-checkbox>
       <p-checkbox  v-model="checked">Checked</p-checkbox>

       <p-checkbox :disabled="true" :checked="false">Disabled unchecked</p-checkbox>
       <p-checkbox :disabled="true" :checked="true">Disabled checked</p-checkbox>

  export default {
    data () {
        return {
          unchecked: false,
          checked: true

Changing colors

To change default radio color, go to _checkboxes-radios.css and change line 160


@include radio-colors($default-color);
@include checkbox-colors($default-color);

If you want to have multiple checkbox colors, we recommend extending these 2 mixins with extra css classes (e.g .form-check.form-check-success) and add the corresponding classes to Checkbox.vue component.

Checkbox Props

Checkbox Events

Event NameDescriptionParameters
inputtriggers when the binding value changesthe updated value


defaultDefault content for checkbox