From 9846e22ce52c723554742860a0dbd3e5cf19b573 Mon Sep 17 00:00:00 2001
From: shadcn <m@shadcn.com>
Date: Thu, 6 Aug 2026 15:36:01 +0400
Subject: [PATCH] fix: control alignment for questionnaire choices (#11424)

---
 .../aria/examples/questionnaire-example.tsx   | 25 ++++++++++---------
 .../registry/bases/aria/ui/questionnaire.tsx  | 16 +++++++++++-
 .../base/examples/questionnaire-example.tsx   | 25 ++++++++++---------
 .../registry/bases/base/ui/questionnaire.tsx  | 16 +++++++++++-
 .../radix/examples/questionnaire-example.tsx  | 25 ++++++++++---------
 .../registry/bases/radix/ui/questionnaire.tsx | 16 +++++++++++-
 apps/v4/registry/styles/style-luma.css        | 12 ++++++---
 apps/v4/registry/styles/style-lyra.css        | 10 +++++---
 apps/v4/registry/styles/style-maia.css        | 12 ++++++---
 apps/v4/registry/styles/style-mira.css        | 10 +++++---
 apps/v4/registry/styles/style-nova.css        | 10 +++++---
 apps/v4/registry/styles/style-rhea.css        | 10 +++++---
 apps/v4/registry/styles/style-sera.css        | 10 +++++---
 apps/v4/registry/styles/style-vega.css        | 14 ++++++++---
 14 files changed, 146 insertions(+), 65 deletions(-)

diff --git a/apps/v4/registry/bases/aria/examples/questionnaire-example.tsx b/apps/v4/registry/bases/aria/examples/questionnaire-example.tsx
index cfd24b0e07b..172b8db4453 100644
--- a/apps/v4/registry/bases/aria/examples/questionnaire-example.tsx
+++ b/apps/v4/registry/bases/aria/examples/questionnaire-example.tsx
@@ -29,6 +29,7 @@ import {
   Questionnaire,
   QuestionnaireActions,
   QuestionnaireChoice,
+  QuestionnaireChoiceDescription,
   QuestionnaireChoices,
   QuestionnaireDescription,
   QuestionnaireError,
@@ -227,21 +228,21 @@ function QuestionnaireCardQuestions() {
             <QuestionnaireChoices>
               <QuestionnaireChoice value="delegation">
                 <span className="font-medium">Sub-agent delegation</span>
-                <span className="text-muted-foreground">
+                <QuestionnaireChoiceDescription>
                   Show when work is delegated and what comes back.
-                </span>
+                </QuestionnaireChoiceDescription>
               </QuestionnaireChoice>
               <QuestionnaireChoice value="questions">
                 <span className="font-medium">Question prompts</span>
-                <span className="text-muted-foreground">
+                <QuestionnaireChoiceDescription>
                   Show choices while the agent waits for input.
-                </span>
+                </QuestionnaireChoiceDescription>
               </QuestionnaireChoice>
               <QuestionnaireChoice value="both">
                 <span className="font-medium">Both together</span>
-                <span className="text-muted-foreground">
+                <QuestionnaireChoiceDescription>
                   Explore one unified interaction pattern.
-                </span>
+                </QuestionnaireChoiceDescription>
               </QuestionnaireChoice>
               <QuestionnaireInput
                 aria-label="Another direction"
@@ -334,21 +335,21 @@ function QuestionnaireQuestions() {
         <QuestionnaireChoices>
           <QuestionnaireChoice value="delegation">
             <span className="font-medium">Sub-agent delegation</span>
-            <span className="text-muted-foreground">
+            <QuestionnaireChoiceDescription>
               Show when work is delegated and what comes back.
-            </span>
+            </QuestionnaireChoiceDescription>
           </QuestionnaireChoice>
           <QuestionnaireChoice value="questions">
             <span className="font-medium">Question prompts</span>
-            <span className="text-muted-foreground">
+            <QuestionnaireChoiceDescription>
               Show choices while the agent waits for input.
-            </span>
+            </QuestionnaireChoiceDescription>
           </QuestionnaireChoice>
           <QuestionnaireChoice value="both">
             <span className="font-medium">Both together</span>
-            <span className="text-muted-foreground">
+            <QuestionnaireChoiceDescription>
               Explore one unified interaction pattern.
-            </span>
+            </QuestionnaireChoiceDescription>
           </QuestionnaireChoice>
           <QuestionnaireInput
             aria-label="Another direction"
diff --git a/apps/v4/registry/bases/aria/ui/questionnaire.tsx b/apps/v4/registry/bases/aria/ui/questionnaire.tsx
index a493e3bb9be..bf921dd10c3 100644
--- a/apps/v4/registry/bases/aria/ui/questionnaire.tsx
+++ b/apps/v4/registry/bases/aria/ui/questionnaire.tsx
@@ -146,12 +146,25 @@ function QuestionnaireChoice({
       </QuestionnairePrimitive.ChoiceLabel>
       <QuestionnairePrimitive.ChoiceShortcut
         data-slot="questionnaire-choice-shortcut"
-        className="cn-questionnaire-choice-shortcut cn-questionnaire-shortcut pointer-events-none ms-auto mt-0.5 hidden shrink-0 group-data-[shortcut]/questionnaire-choice:inline-flex"
+        className="cn-questionnaire-choice-shortcut cn-questionnaire-shortcut pointer-events-none ms-auto hidden shrink-0 group-data-[shortcut]/questionnaire-choice:inline-flex"
       />
     </QuestionnairePrimitive.Choice>
   )
 }
 
+function QuestionnaireChoiceDescription({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="questionnaire-choice-description"
+      className={cn("cn-questionnaire-choice-description", className)}
+      {...props}
+    />
+  )
+}
+
 function QuestionnaireInput({
   className,
   ...props
@@ -307,6 +320,7 @@ export {
   Questionnaire,
   QuestionnaireActions,
   QuestionnaireChoice,
+  QuestionnaireChoiceDescription,
   QuestionnaireChoices,
   QuestionnaireDescription,
   QuestionnaireError,
diff --git a/apps/v4/registry/bases/base/examples/questionnaire-example.tsx b/apps/v4/registry/bases/base/examples/questionnaire-example.tsx
index bc7b60ec989..ad322ae80f8 100644
--- a/apps/v4/registry/bases/base/examples/questionnaire-example.tsx
+++ b/apps/v4/registry/bases/base/examples/questionnaire-example.tsx
@@ -30,6 +30,7 @@ import {
   Questionnaire,
   QuestionnaireActions,
   QuestionnaireChoice,
+  QuestionnaireChoiceDescription,
   QuestionnaireChoices,
   QuestionnaireDescription,
   QuestionnaireError,
@@ -230,21 +231,21 @@ function QuestionnaireCardQuestions() {
             <QuestionnaireChoices>
               <QuestionnaireChoice value="delegation">
                 <span className="font-medium">Sub-agent delegation</span>
-                <span className="text-muted-foreground">
+                <QuestionnaireChoiceDescription>
                   Show when work is delegated and what comes back.
-                </span>
+                </QuestionnaireChoiceDescription>
               </QuestionnaireChoice>
               <QuestionnaireChoice value="questions">
                 <span className="font-medium">Question prompts</span>
-                <span className="text-muted-foreground">
+                <QuestionnaireChoiceDescription>
                   Show choices while the agent waits for input.
-                </span>
+                </QuestionnaireChoiceDescription>
               </QuestionnaireChoice>
               <QuestionnaireChoice value="both">
                 <span className="font-medium">Both together</span>
-                <span className="text-muted-foreground">
+                <QuestionnaireChoiceDescription>
                   Explore one unified interaction pattern.
-                </span>
+                </QuestionnaireChoiceDescription>
               </QuestionnaireChoice>
               <QuestionnaireInput
                 aria-label="Another direction"
@@ -337,21 +338,21 @@ function QuestionnaireQuestions() {
         <QuestionnaireChoices>
           <QuestionnaireChoice value="delegation">
             <span className="font-medium">Sub-agent delegation</span>
-            <span className="text-muted-foreground">
+            <QuestionnaireChoiceDescription>
               Show when work is delegated and what comes back.
-            </span>
+            </QuestionnaireChoiceDescription>
           </QuestionnaireChoice>
           <QuestionnaireChoice value="questions">
             <span className="font-medium">Question prompts</span>
-            <span className="text-muted-foreground">
+            <QuestionnaireChoiceDescription>
               Show choices while the agent waits for input.
-            </span>
+            </QuestionnaireChoiceDescription>
           </QuestionnaireChoice>
           <QuestionnaireChoice value="both">
             <span className="font-medium">Both together</span>
-            <span className="text-muted-foreground">
+            <QuestionnaireChoiceDescription>
               Explore one unified interaction pattern.
-            </span>
+            </QuestionnaireChoiceDescription>
           </QuestionnaireChoice>
           <QuestionnaireInput
             aria-label="Another direction"
diff --git a/apps/v4/registry/bases/base/ui/questionnaire.tsx b/apps/v4/registry/bases/base/ui/questionnaire.tsx
index 3589c13d1a1..5b36d35336b 100644
--- a/apps/v4/registry/bases/base/ui/questionnaire.tsx
+++ b/apps/v4/registry/bases/base/ui/questionnaire.tsx
@@ -146,12 +146,25 @@ function QuestionnaireChoice({
       </QuestionnairePrimitive.ChoiceLabel>
       <QuestionnairePrimitive.ChoiceShortcut
         data-slot="questionnaire-choice-shortcut"
-        className="cn-questionnaire-choice-shortcut cn-questionnaire-shortcut pointer-events-none ms-auto mt-0.5 hidden shrink-0 group-data-[shortcut]/questionnaire-choice:inline-flex"
+        className="cn-questionnaire-choice-shortcut cn-questionnaire-shortcut pointer-events-none ms-auto hidden shrink-0 group-data-[shortcut]/questionnaire-choice:inline-flex"
       />
     </QuestionnairePrimitive.Choice>
   )
 }
 
+function QuestionnaireChoiceDescription({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="questionnaire-choice-description"
+      className={cn("cn-questionnaire-choice-description", className)}
+      {...props}
+    />
+  )
+}
+
 function QuestionnaireInput({
   className,
   ...props
@@ -307,6 +320,7 @@ export {
   Questionnaire,
   QuestionnaireActions,
   QuestionnaireChoice,
+  QuestionnaireChoiceDescription,
   QuestionnaireChoices,
   QuestionnaireDescription,
   QuestionnaireError,
diff --git a/apps/v4/registry/bases/radix/examples/questionnaire-example.tsx b/apps/v4/registry/bases/radix/examples/questionnaire-example.tsx
index b76fcffc897..73d224f8337 100644
--- a/apps/v4/registry/bases/radix/examples/questionnaire-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/questionnaire-example.tsx
@@ -30,6 +30,7 @@ import {
   Questionnaire,
   QuestionnaireActions,
   QuestionnaireChoice,
+  QuestionnaireChoiceDescription,
   QuestionnaireChoices,
   QuestionnaireDescription,
   QuestionnaireError,
@@ -230,21 +231,21 @@ function QuestionnaireCardQuestions() {
             <QuestionnaireChoices>
               <QuestionnaireChoice value="delegation">
                 <span className="font-medium">Sub-agent delegation</span>
-                <span className="text-muted-foreground">
+                <QuestionnaireChoiceDescription>
                   Show when work is delegated and what comes back.
-                </span>
+                </QuestionnaireChoiceDescription>
               </QuestionnaireChoice>
               <QuestionnaireChoice value="questions">
                 <span className="font-medium">Question prompts</span>
-                <span className="text-muted-foreground">
+                <QuestionnaireChoiceDescription>
                   Show choices while the agent waits for input.
-                </span>
+                </QuestionnaireChoiceDescription>
               </QuestionnaireChoice>
               <QuestionnaireChoice value="both">
                 <span className="font-medium">Both together</span>
-                <span className="text-muted-foreground">
+                <QuestionnaireChoiceDescription>
                   Explore one unified interaction pattern.
-                </span>
+                </QuestionnaireChoiceDescription>
               </QuestionnaireChoice>
               <QuestionnaireInput
                 aria-label="Another direction"
@@ -337,21 +338,21 @@ function QuestionnaireQuestions() {
         <QuestionnaireChoices>
           <QuestionnaireChoice value="delegation">
             <span className="font-medium">Sub-agent delegation</span>
-            <span className="text-muted-foreground">
+            <QuestionnaireChoiceDescription>
               Show when work is delegated and what comes back.
-            </span>
+            </QuestionnaireChoiceDescription>
           </QuestionnaireChoice>
           <QuestionnaireChoice value="questions">
             <span className="font-medium">Question prompts</span>
-            <span className="text-muted-foreground">
+            <QuestionnaireChoiceDescription>
               Show choices while the agent waits for input.
-            </span>
+            </QuestionnaireChoiceDescription>
           </QuestionnaireChoice>
           <QuestionnaireChoice value="both">
             <span className="font-medium">Both together</span>
-            <span className="text-muted-foreground">
+            <QuestionnaireChoiceDescription>
               Explore one unified interaction pattern.
-            </span>
+            </QuestionnaireChoiceDescription>
           </QuestionnaireChoice>
           <QuestionnaireInput
             aria-label="Another direction"
diff --git a/apps/v4/registry/bases/radix/ui/questionnaire.tsx b/apps/v4/registry/bases/radix/ui/questionnaire.tsx
index 39b85c0d702..ec40520afd4 100644
--- a/apps/v4/registry/bases/radix/ui/questionnaire.tsx
+++ b/apps/v4/registry/bases/radix/ui/questionnaire.tsx
@@ -146,12 +146,25 @@ function QuestionnaireChoice({
       </QuestionnairePrimitive.ChoiceLabel>
       <QuestionnairePrimitive.ChoiceShortcut
         data-slot="questionnaire-choice-shortcut"
-        className="cn-questionnaire-choice-shortcut cn-questionnaire-shortcut pointer-events-none ms-auto mt-0.5 hidden shrink-0 group-data-[shortcut]/questionnaire-choice:inline-flex"
+        className="cn-questionnaire-choice-shortcut cn-questionnaire-shortcut pointer-events-none ms-auto hidden shrink-0 group-data-[shortcut]/questionnaire-choice:inline-flex"
       />
     </QuestionnairePrimitive.Choice>
   )
 }
 
+function QuestionnaireChoiceDescription({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="questionnaire-choice-description"
+      className={cn("cn-questionnaire-choice-description", className)}
+      {...props}
+    />
+  )
+}
+
 function QuestionnaireInput({
   className,
   ...props
@@ -307,6 +320,7 @@ export {
   Questionnaire,
   QuestionnaireActions,
   QuestionnaireChoice,
+  QuestionnaireChoiceDescription,
   QuestionnaireChoices,
   QuestionnaireDescription,
   QuestionnaireError,
diff --git a/apps/v4/registry/styles/style-luma.css b/apps/v4/registry/styles/style-luma.css
index d284e0eb991..a1e9b9a4ba5 100644
--- a/apps/v4/registry/styles/style-luma.css
+++ b/apps/v4/registry/styles/style-luma.css
@@ -1616,11 +1616,11 @@
   }
 
   .cn-questionnaire-choice {
-    @apply border-input bg-input/20 hover:bg-input/40 data-checked:border-primary/40 data-checked:bg-primary/10 data-invalid:border-destructive has-[>input:focus-visible]:border-ring has-[>input:focus-visible]:ring-ring/50 gap-3 rounded-3xl border px-4 py-3 text-sm has-[>input:focus-visible]:ring-3;
+    @apply border-input bg-input/20 hover:bg-input/40 data-checked:border-primary/40 data-checked:bg-primary/10 data-invalid:border-destructive has-[>input:focus-visible]:border-ring has-[>input:focus-visible]:ring-ring/50 gap-2.5 rounded-3xl border px-4 py-3 text-sm has-[>input:focus-visible]:ring-3;
   }
 
   .cn-questionnaire-choice-indicator {
-    @apply bg-input/90 group-data-checked/questionnaire-choice:bg-primary dark:group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground group-data-checked/questionnaire-choice:border-primary size-4 rounded-[5px] border-transparent;
+    @apply bg-input/90 group-data-checked/questionnaire-choice:bg-primary dark:group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground group-data-checked/questionnaire-choice:border-primary size-4 translate-y-[--spacing(0.45)] group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 rounded-[5px] border-transparent;
   }
 
   .cn-questionnaire-choice-indicator-dot {
@@ -1635,8 +1635,12 @@
     @apply gap-1;
   }
 
+  .cn-questionnaire-choice-description {
+    @apply text-muted-foreground;
+  }
+
   .cn-questionnaire-shortcut {
-    @apply border-primary/10 bg-background/80 text-muted-foreground size-5 items-center justify-center rounded-full border font-mono text-[0.625rem] font-medium leading-none;
+    @apply border-primary/10 bg-background/80 text-muted-foreground size-5 translate-y-[--spacing(0.45)] group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 items-center justify-center rounded-full border font-mono text-[0.625rem] font-medium leading-none;
   }
 
   .cn-questionnaire-input-wrapper {
@@ -1648,7 +1652,7 @@
   }
 
   .cn-questionnaire-error {
-    @apply text-sm;
+    @apply mt-2 text-sm;
   }
 
   .cn-questionnaire-actions {
diff --git a/apps/v4/registry/styles/style-lyra.css b/apps/v4/registry/styles/style-lyra.css
index 5a0f06c647e..e7d59b3a935 100644
--- a/apps/v4/registry/styles/style-lyra.css
+++ b/apps/v4/registry/styles/style-lyra.css
@@ -1599,7 +1599,7 @@
   }
 
   .cn-questionnaire-choice-indicator {
-    @apply border-input group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground group-data-checked/questionnaire-choice:border-primary size-4 rounded-none;
+    @apply border-input group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground group-data-checked/questionnaire-choice:border-primary size-4 translate-y-[--spacing(0.45)] group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 rounded-none;
   }
 
   .cn-questionnaire-choice-indicator-dot {
@@ -1614,8 +1614,12 @@
     @apply gap-0.5;
   }
 
+  .cn-questionnaire-choice-description {
+    @apply text-muted-foreground;
+  }
+
   .cn-questionnaire-shortcut {
-    @apply border-input bg-background text-muted-foreground size-4 items-center justify-center rounded-none border font-mono text-[0.625rem] font-medium leading-none;
+    @apply border-input bg-background text-muted-foreground size-4 translate-y-[--spacing(0.45)] group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 items-center justify-center rounded-none border font-mono text-[0.625rem] font-medium leading-none;
   }
 
   .cn-questionnaire-input-wrapper {
@@ -1627,7 +1631,7 @@
   }
 
   .cn-questionnaire-error {
-    @apply text-xs;
+    @apply mt-2 text-xs;
   }
 
   .cn-questionnaire-actions {
diff --git a/apps/v4/registry/styles/style-maia.css b/apps/v4/registry/styles/style-maia.css
index f64b6380263..32d50ac6933 100644
--- a/apps/v4/registry/styles/style-maia.css
+++ b/apps/v4/registry/styles/style-maia.css
@@ -1617,11 +1617,11 @@
   }
 
   .cn-questionnaire-choice {
-    @apply border-input bg-input/20 hover:bg-input/40 data-checked:border-primary/40 data-checked:bg-primary/10 data-invalid:border-destructive has-[>input:focus-visible]:border-ring has-[>input:focus-visible]:ring-ring/50 gap-3.5 rounded-4xl border px-4 py-3.5 text-sm has-[>input:focus-visible]:ring-[3px];
+    @apply border-input bg-input/20 hover:bg-input/40 data-checked:border-primary/40 data-checked:bg-primary/10 data-invalid:border-destructive has-[>input:focus-visible]:border-ring has-[>input:focus-visible]:ring-ring/50 gap-3 rounded-4xl border px-4 py-3.5 text-sm has-[>input:focus-visible]:ring-[3px];
   }
 
   .cn-questionnaire-choice-indicator {
-    @apply border-input dark:bg-input/30 group-data-checked/questionnaire-choice:bg-primary dark:group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground group-data-checked/questionnaire-choice:border-primary size-4 rounded-[6px];
+    @apply border-input dark:bg-input/30 group-data-checked/questionnaire-choice:bg-primary dark:group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground group-data-checked/questionnaire-choice:border-primary size-4 translate-y-[--spacing(0.45)] group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 rounded-[6px];
   }
 
   .cn-questionnaire-choice-indicator-dot {
@@ -1636,8 +1636,12 @@
     @apply gap-1;
   }
 
+  .cn-questionnaire-choice-description {
+    @apply text-muted-foreground;
+  }
+
   .cn-questionnaire-shortcut {
-    @apply border-input bg-background/80 text-muted-foreground size-5 items-center justify-center rounded-full border font-mono text-[0.625rem] font-medium leading-none;
+    @apply border-input bg-background/80 text-muted-foreground size-5 translate-y-[--spacing(0.45)] group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 items-center justify-center rounded-full border font-mono text-[0.625rem] font-medium leading-none;
   }
 
   .cn-questionnaire-input-wrapper {
@@ -1649,7 +1653,7 @@
   }
 
   .cn-questionnaire-error {
-    @apply text-sm;
+    @apply mt-2 text-sm;
   }
 
   .cn-questionnaire-actions {
diff --git a/apps/v4/registry/styles/style-mira.css b/apps/v4/registry/styles/style-mira.css
index bc8f08bdfd5..f680bac7fdd 100644
--- a/apps/v4/registry/styles/style-mira.css
+++ b/apps/v4/registry/styles/style-mira.css
@@ -1626,7 +1626,7 @@
   }
 
   .cn-questionnaire-choice-indicator {
-    @apply border-input dark:bg-input/30 group-data-checked/questionnaire-choice:bg-primary dark:group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground group-data-checked/questionnaire-choice:border-primary size-4 rounded-[4px];
+    @apply border-input dark:bg-input/30 group-data-checked/questionnaire-choice:bg-primary dark:group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground group-data-checked/questionnaire-choice:border-primary size-4 translate-y-[--spacing(0.45)] group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 rounded-[4px];
   }
 
   .cn-questionnaire-choice-indicator-dot {
@@ -1641,8 +1641,12 @@
     @apply gap-0.5;
   }
 
+  .cn-questionnaire-choice-description {
+    @apply text-muted-foreground;
+  }
+
   .cn-questionnaire-shortcut {
-    @apply border-input bg-background/80 text-muted-foreground size-4 items-center justify-center rounded-sm border font-mono text-[0.5625rem] font-medium leading-none;
+    @apply border-input bg-background/80 text-muted-foreground size-4 translate-y-[--spacing(0.45)] group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 items-center justify-center rounded-sm border font-mono text-[0.5625rem] font-medium leading-none;
   }
 
   .cn-questionnaire-input-wrapper {
@@ -1654,7 +1658,7 @@
   }
 
   .cn-questionnaire-error {
-    @apply text-xs/relaxed;
+    @apply mt-2 text-xs/relaxed;
   }
 
   .cn-questionnaire-actions {
diff --git a/apps/v4/registry/styles/style-nova.css b/apps/v4/registry/styles/style-nova.css
index dc9d3d807c0..beb03a2bad6 100644
--- a/apps/v4/registry/styles/style-nova.css
+++ b/apps/v4/registry/styles/style-nova.css
@@ -1624,7 +1624,7 @@
   }
 
   .cn-questionnaire-choice-indicator {
-    @apply border-input dark:bg-input/30 group-data-checked/questionnaire-choice:bg-primary dark:group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground group-data-checked/questionnaire-choice:border-primary size-4 rounded-[4px];
+    @apply border-input dark:bg-input/30 group-data-checked/questionnaire-choice:bg-primary dark:group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground group-data-checked/questionnaire-choice:border-primary size-4 translate-y-[--spacing(0.45)] group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 rounded-[4px];
   }
 
   .cn-questionnaire-choice-indicator-dot {
@@ -1639,8 +1639,12 @@
     @apply gap-0.5;
   }
 
+  .cn-questionnaire-choice-description {
+    @apply text-muted-foreground;
+  }
+
   .cn-questionnaire-shortcut {
-    @apply border-input bg-background text-muted-foreground size-5 items-center justify-center rounded-md border font-mono text-[0.625rem] font-medium leading-none;
+    @apply border-input bg-background text-muted-foreground size-5 translate-y-[--spacing(0.45)] group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 items-center justify-center rounded-md border font-mono text-[0.625rem] font-medium leading-none;
   }
 
   .cn-questionnaire-input-wrapper {
@@ -1652,7 +1656,7 @@
   }
 
   .cn-questionnaire-error {
-    @apply text-sm;
+    @apply mt-2 text-sm;
   }
 
   .cn-questionnaire-actions {
diff --git a/apps/v4/registry/styles/style-rhea.css b/apps/v4/registry/styles/style-rhea.css
index 10bc6922315..b0b0f331310 100644
--- a/apps/v4/registry/styles/style-rhea.css
+++ b/apps/v4/registry/styles/style-rhea.css
@@ -1620,7 +1620,7 @@
   }
 
   .cn-questionnaire-choice-indicator {
-    @apply bg-input/90 group-data-checked/questionnaire-choice:bg-primary dark:group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground group-data-checked/questionnaire-choice:border-primary size-4 rounded-[5px] border-transparent;
+    @apply bg-input/90 group-data-checked/questionnaire-choice:bg-primary dark:group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground group-data-checked/questionnaire-choice:border-primary size-4 translate-y-[--spacing(0.45)] group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 rounded-[5px] border-transparent;
   }
 
   .cn-questionnaire-choice-indicator-dot {
@@ -1635,8 +1635,12 @@
     @apply gap-1;
   }
 
+  .cn-questionnaire-choice-description {
+    @apply text-muted-foreground;
+  }
+
   .cn-questionnaire-shortcut {
-    @apply border-primary/10 bg-background/80 text-muted-foreground size-5 items-center justify-center rounded-full border font-mono text-[0.625rem] font-medium leading-none;
+    @apply border-primary/10 bg-background/80 text-muted-foreground size-5 translate-y-[--spacing(0.45)] group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 items-center justify-center rounded-full border font-mono text-[0.625rem] font-medium leading-none;
   }
 
   .cn-questionnaire-input-wrapper {
@@ -1648,7 +1652,7 @@
   }
 
   .cn-questionnaire-error {
-    @apply text-sm;
+    @apply mt-2 text-sm;
   }
 
   .cn-questionnaire-actions {
diff --git a/apps/v4/registry/styles/style-sera.css b/apps/v4/registry/styles/style-sera.css
index 908bcd61458..3f0a1508da9 100644
--- a/apps/v4/registry/styles/style-sera.css
+++ b/apps/v4/registry/styles/style-sera.css
@@ -1611,7 +1611,7 @@
   }
 
   .cn-questionnaire-choice-indicator {
-    @apply border-input group-data-checked/questionnaire-choice:border-foreground group-data-[type=checkbox]/questionnaire-choice:group-data-checked/questionnaire-choice:bg-primary group-data-[type=checkbox]/questionnaire-choice:group-data-checked/questionnaire-choice:text-primary-foreground group-data-[type=checkbox]/questionnaire-choice:group-data-checked/questionnaire-choice:border-primary size-4.5;
+    @apply border-input group-data-checked/questionnaire-choice:border-foreground group-data-[type=checkbox]/questionnaire-choice:group-data-checked/questionnaire-choice:bg-primary group-data-[type=checkbox]/questionnaire-choice:group-data-checked/questionnaire-choice:text-primary-foreground group-data-[type=checkbox]/questionnaire-choice:group-data-checked/questionnaire-choice:border-primary size-4.5 translate-y-[--spacing(0.45)] group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5;
   }
 
   .cn-questionnaire-choice-indicator-dot {
@@ -1626,8 +1626,12 @@
     @apply gap-1;
   }
 
+  .cn-questionnaire-choice-description {
+    @apply text-muted-foreground;
+  }
+
   .cn-questionnaire-shortcut {
-    @apply border-input bg-background text-muted-foreground size-5 items-center justify-center rounded-none border font-mono text-[0.625rem] font-medium leading-none;
+    @apply border-input bg-background text-muted-foreground size-5 translate-y-[--spacing(0.45)] group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 items-center justify-center rounded-none border font-mono text-[0.625rem] font-medium leading-none;
   }
 
   .cn-questionnaire-input-wrapper {
@@ -1639,7 +1643,7 @@
   }
 
   .cn-questionnaire-error {
-    @apply text-sm;
+    @apply mt-2 text-sm;
   }
 
   .cn-questionnaire-actions {
diff --git a/apps/v4/registry/styles/style-vega.css b/apps/v4/registry/styles/style-vega.css
index a7f219baf64..5621c5d5d76 100644
--- a/apps/v4/registry/styles/style-vega.css
+++ b/apps/v4/registry/styles/style-vega.css
@@ -257,6 +257,10 @@
     @apply px-(--card-spacing);
   }
 
+  .cn-card-content:has(> [data-slot=questionnaire-choices]) {
+    @apply flex flex-col gap-3;
+  }
+
   .cn-card-footer {
     @apply rounded-b-xl px-(--card-spacing) [.border-t]:pt-(--card-spacing);
   }
@@ -1616,11 +1620,11 @@
   }
 
   .cn-questionnaire-choice {
-    @apply border-input dark:bg-input/20 hover:bg-muted/50 data-checked:border-primary/40 data-checked:bg-muted dark:data-checked:bg-muted data-invalid:border-destructive has-[>input:focus-visible]:border-ring has-[>input:focus-visible]:ring-ring/50 gap-3.5 rounded-md border bg-transparent px-4 py-3.5 text-sm shadow-xs has-[>input:focus-visible]:ring-3;
+    @apply border-input dark:bg-input/20 hover:bg-muted/50 data-checked:border-primary/40 data-checked:bg-muted dark:data-checked:bg-muted data-invalid:border-destructive has-[>input:focus-visible]:border-ring has-[>input:focus-visible]:ring-ring/50 gap-3 rounded-md border bg-transparent px-4 py-3.5 text-sm shadow-xs has-[>input:focus-visible]:ring-3;
   }
 
   .cn-questionnaire-choice-indicator {
-    @apply border-input dark:bg-input/30 group-data-checked/questionnaire-choice:bg-primary dark:group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground group-data-checked/questionnaire-choice:border-primary size-4 rounded-[4px];
+    @apply border-input dark:bg-input/30 group-data-checked/questionnaire-choice:bg-primary dark:group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground group-data-checked/questionnaire-choice:border-primary size-4 translate-y-[--spacing(0.45)] group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 rounded-[4px];
   }
 
   .cn-questionnaire-choice-indicator-dot {
@@ -1635,8 +1639,12 @@
     @apply gap-1;
   }
 
+  .cn-questionnaire-choice-description {
+    @apply text-muted-foreground;
+  }
+
   .cn-questionnaire-shortcut {
-    @apply border-input bg-background text-muted-foreground size-5 items-center justify-center rounded-md border font-mono text-[0.625rem] font-medium leading-none shadow-xs;
+    @apply border-input bg-background text-muted-foreground size-5 translate-y-[--spacing(0.45)] group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 items-center justify-center rounded-md border font-mono text-[0.625rem] font-medium leading-none shadow-xs;
   }
 
   .cn-questionnaire-input-wrapper {