On gists

$attrs

Vue.js

index.vue Raw #

<template>
  <div>
    <p>
      <custom-checkbox>Simple example</custom-checkbox>
    </p>
    <p>
      <custom-checkbox :disabled="true">Disabled</custom-checkbox>
    </p>
  </div>
</template>

<script>
import CustomCheckbox from './CustomCheckbox'
export default {
  components: { CustomCheckbox }
}
</script>

<style scoped>

</style>

CustomCheckbox.vue Raw #

<template>
    <label>
        <input type="checkbox" 
        :checked="value" 
        v-bind="$attrs" />
        <slot />
    </label>
</template>

<script>
export default {
    name: 'CustomCheckbox',
    props: {
        value: {
            type: Boolean,
            default: false,
        },
    },
};
</script>

<style scoped></style>