<template>
  <label :class="['checkbox', classSize, {'checkbox-disabled' : disabled}, {'checkbox-inline' : inline}]">
    <input
      type="checkbox"
      class="checkbox-entry"
      :disabled="disabled"
      v-bind="$attrs"
      ref="input"
      :value="value"
      :checked="isChecked"
      v-on="inputListeners"
    >

    <span class="checkbox-text" v-html="label"></span>
    <span v-if="description" class="checkbox-description">{{ description }}</span>
    <div v-if="error" class="field-error-container field-error-error">
      <i class="field-error-icon fas fa-exclamation-circle"></i>
      <div class="field-error-message">
        {{ error }}
      </div>
    </div>

  </label>
</template>

<style src="../../identity.css"></style>
<style scoped src="./styles.css" /></style>
<script src="./scripts.js"></script>