From e1630cd91838e12b46e70210c4aaabf633be6961 Mon Sep 17 00:00:00 2001
From: Bartosz-Do <xbartoszdobija@gmail.com>
Date: Fri, 7 Aug 2026 23:48:54 +0200
Subject: [PATCH] Fix radio input groups missing shared `name` across preview
 forms (#2826)

---
 preview/pages/job-listing.astro             | 4 ++--
 preview/pages/onboarding.astro              | 8 ++++----
 shared/components/forms/FormElements3.astro | 2 +-
 shared/ui/DropdownMenu.astro                | 2 +-
 shared/ui/DropdownMenuAll.astro             | 2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/preview/pages/job-listing.astro b/preview/pages/job-listing.astro
index 71007082c..4c895e1ff 100644
--- a/preview/pages/job-listing.astro
+++ b/preview/pages/job-listing.astro
@@ -19,7 +19,7 @@ interface Job {
 const jobs = jobsData as Job[]
 
 const types = ['Programming', 'Design', 'Management / Finance', 'Customer Support', 'Sales / Marketing']
-const salaries = ['$20K - $50K', '$50K - $100K', '> $100K', 'Drawing / Painting']
+const salaries = ['$20K - $50K', '$50K - $100K', '> $100K']
 ---
 
 <DefaultLayout title="Search for Jobs" pageHeader="Search for Jobs" actions="add-job" pageMenu="extra.job-listing">
@@ -48,7 +48,7 @@ const salaries = ['$20K - $50K', '$50K - $100K', '> $100K', 'Drawing / Painting'
           {
             salaries.map((salary, i) => (
               <label class="form-check">
-                <input type="radio" class="form-check-input" name="form-salary" value={i + 1} checked={i + 1 <= 2} />
+                <input type="radio" class="form-check-input" name="form-salary" value={i + 1} checked={i === 0} />
                 <span class="form-check-label">{salary}</span>
               </label>
             ))
diff --git a/preview/pages/onboarding.astro b/preview/pages/onboarding.astro
index 6aa877803..de8596e1d 100644
--- a/preview/pages/onboarding.astro
+++ b/preview/pages/onboarding.astro
@@ -72,19 +72,19 @@ import FormGroup from '@ui/FormGroup.astro'
           <fieldset class="border-0 p-0 m-0">
             <legend class="form-label float-none mb-0" style="font-size: inherit;">What are you planning to use this for?</legend>
             <div class="form-check">
-              <input class="form-check-input" type="radio" value="personal" id="use-personal" checked />
+              <input class="form-check-input" type="radio" name="use-for" value="personal" id="use-personal" checked />
               <label class="form-check-label" for="use-personal"> Personal projects </label>
             </div>
             <div class="form-check">
-              <input class="form-check-input" type="radio" value="business" id="use-business" />
+              <input class="form-check-input" type="radio" name="use-for" value="business" id="use-business" />
               <label class="form-check-label" for="use-business"> Business applications </label>
             </div>
             <div class="form-check">
-              <input class="form-check-input" type="radio" value="client" id="use-client" />
+              <input class="form-check-input" type="radio" name="use-for" value="client" id="use-client" />
               <label class="form-check-label" for="use-client"> Client work </label>
             </div>
             <div class="form-check">
-              <input class="form-check-input" type="radio" value="learning" id="use-learning" />
+              <input class="form-check-input" type="radio" name="use-for" value="learning" id="use-learning" />
               <label class="form-check-label" for="use-learning"> Learning and experimentation </label>
             </div>
           </fieldset>
diff --git a/shared/components/forms/FormElements3.astro b/shared/components/forms/FormElements3.astro
index 6f0868652..285151c4d 100644
--- a/shared/components/forms/FormElements3.astro
+++ b/shared/components/forms/FormElements3.astro
@@ -46,7 +46,7 @@ const blueHex = (site as { colors: { blue: { hex: string } } }).colors.blue.hex
           return (
             <div class="col-6 col-sm-4">
               <label class="form-imagecheck mb-2">
-                <input name="form-imagecheck-radio" type="radio" value={index} class="form-imagecheck-input" checked={index === 2 || index === 4 || index === 7} />
+                <input name="form-imagecheck-radio" type="radio" value={index} class="form-imagecheck-input" checked={index === 2} />
                 <span class="form-imagecheck-figure">
                   <img src={`./static/photos/${photo.file}`} alt={photo.title} class="form-imagecheck-image" />
                 </span>
diff --git a/shared/ui/DropdownMenu.astro b/shared/ui/DropdownMenu.astro
index 7b91d8089..0ea83cca8 100644
--- a/shared/ui/DropdownMenu.astro
+++ b/shared/ui/DropdownMenu.astro
@@ -59,7 +59,7 @@ const countryItems = (countries as { name: string; flag: string }[]).slice(0, 5)
     ) : check || radio ? (
       [1, 2, 3].map((i) => (
         <label class="dropdown-item">
-          <input class="form-check-input m-0 me-2" type={radio ? 'radio' : 'checkbox'} /> Option {i}
+          <input class="form-check-input m-0 me-2" type={radio ? 'radio' : 'checkbox'} name={radio ? 'dropdown-menu-radio' : undefined} /> Option {i}
         </label>
       ))
     ) : showPeople ? (
diff --git a/shared/ui/DropdownMenuAll.astro b/shared/ui/DropdownMenuAll.astro
index 0b72eedea..9a980cecd 100644
--- a/shared/ui/DropdownMenuAll.astro
+++ b/shared/ui/DropdownMenuAll.astro
@@ -24,7 +24,7 @@ const peopleItems = (people as { id: number | string; full_name: string }[]).sli
       Public
     </label>
   </div>
-  <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio" /> Radio input</label>
+  <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio" name="dropdown-menu-all-radio" /> Radio input</label>
   <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="checkbox" /> Checkbox input</label>
   <label class="dropdown-item form-switch"><input class="form-check-input m-0 me-2" type="checkbox" /> Checkbox input</label>