CheckboxField.vue 741 B

12345678910111213141516171819202122232425262728293031323334
  1. <template>
  2. <label
  3. :for="name"
  4. class="checkbox-label"
  5. :class="disabled ? 'text-gray-400 pointer-events-none' : ''"
  6. >
  7. <input
  8. :id="name"
  9. :checked="value"
  10. @change="checkboxChanged"
  11. type="checkbox"
  12. class="checkbox"
  13. :disabled="disabled"
  14. />
  15. {{ label }}
  16. </label>
  17. </template>
  18. <script>
  19. export default {
  20. props: {
  21. label: { required: true },
  22. name: { required: true },
  23. disabled: { required: false },
  24. value: { required: false, default: false },
  25. },
  26. methods: {
  27. checkboxChanged(event) {
  28. this.$emit('input', event.target.checked);
  29. },
  30. },
  31. };
  32. </script>