From 7d916b45c21db05cee67e4a281fc4356f8478e01 Mon Sep 17 00:00:00 2001
From: ben-basten <45583362+ben-basten@users.noreply.github.com>
Date: Wed, 11 Mar 2026 18:54:41 -0600
Subject: [PATCH 1/6] fix: use standard checkbox for RSVP

---
 app/components/form/FormCheckbox.vue       | 49 ++++++++++++++++++----
 app/components/form/RsvpCheckbox.vue       | 36 ----------------
 app/components/form/rsvp/StepHousehold.vue |  8 ++--
 3 files changed, 45 insertions(+), 48 deletions(-)
 delete mode 100644 app/components/form/RsvpCheckbox.vue

diff --git a/app/components/form/FormCheckbox.vue b/app/components/form/FormCheckbox.vue
index 01a43ea..c9bdaea 100644
--- a/app/components/form/FormCheckbox.vue
+++ b/app/components/form/FormCheckbox.vue
@@ -1,22 +1,55 @@
 <template>
-  <div class="flex items-center gap-3">
+  <div v-if="isGroup" class="relative">
     <input
-      :id
-      v-model="model"
+      :id="inputId"
+      v-model="groupModel"
+      type="checkbox"
+      :name="name"
+      :value="value"
+      class="peer sr-only"
+    />
+    <label
+      :for="inputId"
+      class="block rounded-lg py-4 pl-4 pr-10 border-2 border-foreground text-lg cursor-pointer bg-background peer-checked:bg-green-800/10 peer-focus-visible:outline-2 outline-offset-2 outline-accent select-none transition-colors ease-out duration-default"
+    >
+      {{ label }}
+    </label>
+    <IconCheck
+      aria-hidden
+      class="size-7 absolute right-3 top-1/2 -translate-y-1/2 invisible peer-checked:visible"
+    />
+    <IconClose
+      aria-hidden
+      class="text-error size-7 absolute right-3 top-1/2 -translate-y-1/2 visible peer-checked:invisible"
+    />
+  </div>
+  <div v-else class="flex items-center gap-3">
+    <input
+      :id="inputId"
+      v-model="booleanModel"
       type="checkbox"
       class="size-5 rounded border-2 border-foreground accent-accent cursor-pointer"
     />
-    <label :for="id" class="text-lg font-semibold cursor-pointer select-none">
+    <label
+      :for="inputId"
+      class="text-lg font-semibold cursor-pointer select-none"
+    >
       {{ label }}
     </label>
   </div>
 </template>
 
 <script setup lang="ts">
-const model = defineModel<boolean>();
-const id = useId();
-
-const { label } = defineProps<{
+const props = defineProps<{
   label: string;
+  value?: string;
+  name?: string;
 }>();
+
+const booleanModel = defineModel<boolean>();
+const groupModel = defineModel<string[]>("group");
+
+const fallbackId = useId();
+const isGroup = computed(() => props.value !== undefined);
+const inputId = computed(() => (isGroup.value ? props.value! : fallbackId));
 </script>
diff --git a/app/components/form/RsvpCheckbox.vue b/app/components/form/RsvpCheckbox.vue
deleted file mode 100644
index a79ca9c..0000000
--- a/app/components/form/RsvpCheckbox.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div class="relative">
-    <input
-      :id="value"
-      v-model="model"
-      type="checkbox"
-      :name="name"
-      :value="value"
-      class="peer sr-only"
-    />
-    <label
-      :for="value"
-      class="block rounded-lg py-4 pl-4 pr-10 border-2 border-foreground text-lg cursor-pointer bg-background peer-checked:bg-green-800/10 peer-focus-visible:outline-2 outline-offset-2 outline-accent select-none transition-colors ease-out duration-default"
-    >
-      {{ label }}
-    </label>
-    <IconCheck
-      aria-hidden
-      class="size-7 absolute right-3 top-1/2 -translate-y-1/2 invisible peer-checked:visible"
-    />
-    <IconClose
-      aria-hidden
-      class="text-error size-7 absolute right-3 top-1/2 -translate-y-1/2 visible peer-checked:invisible"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-  label: string;
-  value: string;
-  name: string;
-}>();
-
-const model = defineModel<string[]>();
-</script>
diff --git a/app/components/form/rsvp/StepHousehold.vue b/app/components/form/rsvp/StepHousehold.vue
index 98b665d..14d309f 100644
--- a/app/components/form/rsvp/StepHousehold.vue
+++ b/app/components/form/rsvp/StepHousehold.vue
@@ -10,17 +10,17 @@
     @secondary="rsvpStore.reset()"
   >
     <fieldset class="flex flex-col gap-y-4">
-      <RsvpCheckbox
+      <FormCheckbox
         v-if="rsvpStore.self"
-        v-model="rsvpStore.attendingIds"
+        v-model:group="rsvpStore.attendingIds"
         :label="rsvpStore.self.displayName"
         :value="rsvpStore.self.id"
         name="attending"
       />
-      <RsvpCheckbox
+      <FormCheckbox
         v-for="guest in rsvpStore.guests"
         :key="guest.id"
-        v-model="rsvpStore.attendingIds"
+        v-model:group="rsvpStore.attendingIds"
         :label="guest.displayName"
         :value="guest.id"
         name="attending"

From 8187d7aef2aacda8fc62e647bb720fe95cc6a6ff Mon Sep 17 00:00:00 2001
From: ben-basten <45583362+ben-basten@users.noreply.github.com>
Date: Wed, 11 Mar 2026 19:00:48 -0600
Subject: [PATCH 2/6] fix: update FormCheckbox to use v-model for individual
 checkboxes

---
 app/components/form/FormCheckbox.vue       | 34 ++++------------------
 app/components/form/rsvp/StepHousehold.vue |  4 +--
 2 files changed, 8 insertions(+), 30 deletions(-)

diff --git a/app/components/form/FormCheckbox.vue b/app/components/form/FormCheckbox.vue
index c9bdaea..c01b9d1 100644
--- a/app/components/form/FormCheckbox.vue
+++ b/app/components/form/FormCheckbox.vue
@@ -1,33 +1,11 @@
 <template>
-  <div v-if="isGroup" class="relative">
+  <div class="flex items-center gap-3">
     <input
       :id="inputId"
-      v-model="groupModel"
+      v-model="model"
       type="checkbox"
       :name="name"
       :value="value"
-      class="peer sr-only"
-    />
-    <label
-      :for="inputId"
-      class="block rounded-lg py-4 pl-4 pr-10 border-2 border-foreground text-lg cursor-pointer bg-background peer-checked:bg-green-800/10 peer-focus-visible:outline-2 outline-offset-2 outline-accent select-none transition-colors ease-out duration-default"
-    >
-      {{ label }}
-    </label>
-    <IconCheck
-      aria-hidden
-      class="size-7 absolute right-3 top-1/2 -translate-y-1/2 invisible peer-checked:visible"
-    />
-    <IconClose
-      aria-hidden
-      class="text-error size-7 absolute right-3 top-1/2 -translate-y-1/2 visible peer-checked:invisible"
-    />
-  </div>
-  <div v-else class="flex items-center gap-3">
-    <input
-      :id="inputId"
-      v-model="booleanModel"
-      type="checkbox"
       class="size-5 rounded border-2 border-foreground accent-accent cursor-pointer"
     />
     <label
@@ -46,10 +24,10 @@ const props = defineProps<{
   name?: string;
 }>();
 
-const booleanModel = defineModel<boolean>();
-const groupModel = defineModel<string[]>("group");
+const model = defineModel<boolean | string[]>();
 
 const fallbackId = useId();
-const isGroup = computed(() => props.value !== undefined);
-const inputId = computed(() => (isGroup.value ? props.value! : fallbackId));
+const inputId = computed(() =>
+  props.value !== undefined ? props.value : fallbackId,
+);
 </script>
diff --git a/app/components/form/rsvp/StepHousehold.vue b/app/components/form/rsvp/StepHousehold.vue
index 14d309f..07403e0 100644
--- a/app/components/form/rsvp/StepHousehold.vue
+++ b/app/components/form/rsvp/StepHousehold.vue
@@ -12,7 +12,7 @@
     <fieldset class="flex flex-col gap-y-4">
       <FormCheckbox
         v-if="rsvpStore.self"
-        v-model:group="rsvpStore.attendingIds"
+        v-model="rsvpStore.attendingIds"
         :label="rsvpStore.self.displayName"
         :value="rsvpStore.self.id"
         name="attending"
@@ -20,7 +20,7 @@
       <FormCheckbox
         v-for="guest in rsvpStore.guests"
         :key="guest.id"
-        v-model:group="rsvpStore.attendingIds"
+        v-model="rsvpStore.attendingIds"
         :label="guest.displayName"
         :value="guest.id"
         name="attending"

From 8fe00cfeb28a8a1fa88b5cf0cd1137862cdcaab8 Mon Sep 17 00:00:00 2001
From: ben-basten <45583362+ben-basten@users.noreply.github.com>
Date: Wed, 11 Mar 2026 20:23:38 -0600
Subject: [PATCH 3/6] wip: revert unnecessary changes

---
 app/components/form/FormCheckbox.vue | 21 +++++++--------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/app/components/form/FormCheckbox.vue b/app/components/form/FormCheckbox.vue
index c01b9d1..ea770b8 100644
--- a/app/components/form/FormCheckbox.vue
+++ b/app/components/form/FormCheckbox.vue
@@ -1,33 +1,26 @@
 <template>
   <div class="flex items-center gap-3">
     <input
-      :id="inputId"
+      :id
       v-model="model"
       type="checkbox"
       :name="name"
       :value="value"
       class="size-5 rounded border-2 border-foreground accent-accent cursor-pointer"
     />
-    <label
-      :for="inputId"
-      class="text-lg font-semibold cursor-pointer select-none"
-    >
+    <label :for="id" class="text-lg font-semibold cursor-pointer select-none">
       {{ label }}
     </label>
   </div>
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{
+const model = defineModel<boolean | string[]>();
+const id = useId();
+
+const { label, name, value } = defineProps<{
   label: string;
-  value?: string;
   name?: string;
+  value?: string;
 }>();
-
-const model = defineModel<boolean | string[]>();
-
-const fallbackId = useId();
-const inputId = computed(() =>
-  props.value !== undefined ? props.value : fallbackId,
-);
 </script>

From 01f1fd97eb54166e314543af42b0cfbe8544e951 Mon Sep 17 00:00:00 2001
From: ben-basten <45583362+ben-basten@users.noreply.github.com>
Date: Wed, 11 Mar 2026 20:25:38 -0600
Subject: [PATCH 4/6] wip: move helper text

---
 app/components/form/rsvp/StepHousehold.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/form/rsvp/StepHousehold.vue b/app/components/form/rsvp/StepHousehold.vue
index 07403e0..bb9f815 100644
--- a/app/components/form/rsvp/StepHousehold.vue
+++ b/app/components/form/rsvp/StepHousehold.vue
@@ -25,10 +25,10 @@
         :value="guest.id"
         name="attending"
       />
-      <p class="text-sm font-bold -mt-2 text-center">
-        {{ message }}
-      </p>
     </fieldset>
+    <p class="text-sm font-bold text-center">
+      {{ message }}
+    </p>
     <FormInput
       v-if="rsvpStore.anonymousGuest"
       v-model="rsvpStore.plusOneName"

From dbf9e5eef998db7b0a0c074481e2f9e82104308e Mon Sep 17 00:00:00 2001
From: ben-basten <45583362+ben-basten@users.noreply.github.com>
Date: Wed, 11 Mar 2026 20:32:56 -0600
Subject: [PATCH 5/6] wip: use shorthand

---
 app/components/form/FormCheckbox.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/form/FormCheckbox.vue b/app/components/form/FormCheckbox.vue
index ea770b8..2489d5b 100644
--- a/app/components/form/FormCheckbox.vue
+++ b/app/components/form/FormCheckbox.vue
@@ -4,8 +4,8 @@
       :id
       v-model="model"
       type="checkbox"
-      :name="name"
-      :value="value"
+      :name
+      :value
       class="size-5 rounded border-2 border-foreground accent-accent cursor-pointer"
     />
     <label :for="id" class="text-lg font-semibold cursor-pointer select-none">

From 6a1cf493a8b1073914af24c86d4eff38271a26a9 Mon Sep 17 00:00:00 2001
From: ben-basten <45583362+ben-basten@users.noreply.github.com>
Date: Wed, 11 Mar 2026 20:33:10 -0600
Subject: [PATCH 6/6] wip: left align

---
 app/components/form/rsvp/StepHousehold.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/form/rsvp/StepHousehold.vue b/app/components/form/rsvp/StepHousehold.vue
index bb9f815..b755f3a 100644
--- a/app/components/form/rsvp/StepHousehold.vue
+++ b/app/components/form/rsvp/StepHousehold.vue
@@ -26,7 +26,7 @@
         name="attending"
       />
     </fieldset>
-    <p class="text-sm font-bold text-center">
+    <p class="text-sm font-bold">
       {{ message }}
     </p>
     <FormInput