<template>
  <div class="form-group">
    <label class="custom-control custom-checkbox">
      <input
        type="checkbox"
        :class="{ 'custom-control-input': true, 'is-invalid': hasError }"
        v-bind="$attrs"
        v-on="$listeners"
        :id="id"
        @change="$emit('check', $event.target.checked)"
      >
      <span class="custom-control-label" :for="id">{{ label }}</span>
    </label>

    <div v-if="hasError" class="invalid-feedback d-block">
      <slot name="invalid-feedback">{{ getError }}</slot>
    </div>
  </div>
</template>

<script>
import ErrorMixin from '../../../mixins/error-mixin';

export default {
  name: 'EbCheckbox',

  mixins: [ErrorMixin],

  inheritAttrs: false,

  model: {
    event: 'check'
  },
  props: {
    id: {
      type: String,
      default() {
        return `checkbox-input-${this._uid}`;
      }
    },
    label: String
  }
};
</script>


