Checkboxes

To use the custom checkbox controls you need to import the custom made component:

import {Checkbox} from 'src/components'

Global usage

Vue.component(Checkobx.name, Checkbox)

For local usage

export default {
  components: {
    [Checkbox.name]: Checkbox
  }
}

Custom checkboxes

Unchecked

Checked

Disabled unchecked

Disabled checked

<template>
    <div>
       <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>
    </div>
</template>

<script>
  export default {
    data () {
        return {
          unchecked: false,
          checked: true
        }
      }
  }
</script>

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 Name	Description	Parameters
input	triggers when the binding value changes	the updated value

Slots

Name	Description
default	Default content for checkbox

# Checkboxes

# Custom checkboxes

# Changing colors

# Checkbox Props