fix

src/components/form/CheckboxField.vue

@@ -0,0 +1,79 @@
+<template>
+  <button
+    type="button"
+    class="checkbox-field"
+    :class="{
+      'checkbox-field--selected': modelValue,
+      'checkbox-field--disabled': disabled,
+    }"
+    :disabled="disabled"
+    @click="onToggle"
+  >
+    <span class="checkbox-field__box" />
+    <span v-if="label" class="checkbox-field__label">{{ label }}</span>
+    <slot />
+  </button>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  label: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const onToggle = () => {
+  if (props.disabled) return
+  const next = !props.modelValue
+  emit('update:modelValue', next)
+  emit('change', next)
+}
+</script>
+
+<style lang="scss" scoped>
+.checkbox-field {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.25rem 0.5rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-family: var(--font-family-fa);
+  transition: opacity 0.15s ease;
+
+  &:hover {
+    opacity: 0.85;
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  &--selected .checkbox-field__box {
+    background: #999999;
+    border-color: #999999;
+  }
+
+  &__box {
+    width: 0.95rem;
+    height: 0.95rem;
+    border-radius: 0.3rem;
+    border: 0.75px solid #c2c2c2;
+    background: transparent;
+    flex-shrink: 0;
+    transition: background 0.15s ease, border-color 0.15s ease;
+  }
+
+  &__label {
+    font-weight: 400;
+    font-size: 0.95rem;
+    line-height: 1.4;
+    color: #5d5d5d;
+    white-space: nowrap;
+  }
+}
+</style>