From eeda32993d4d5dca6b2ade670e01e5f41cfd3e35 Mon Sep 17 00:00:00 2001
From: Catalin Pit <25515812+catalinpit@users.noreply.github.com>
Date: Thu, 23 Jan 2025 15:35:38 +0200
Subject: [PATCH 1/3] chore: add label for radio field

---
 .../radio-field.tsx                             | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/ui/primitives/document-flow/field-items-advanced-settings/radio-field.tsx b/packages/ui/primitives/document-flow/field-items-advanced-settings/radio-field.tsx
index 04529098a4..2c93847f03 100644
--- a/packages/ui/primitives/document-flow/field-items-advanced-settings/radio-field.tsx
+++ b/packages/ui/primitives/document-flow/field-items-advanced-settings/radio-field.tsx
@@ -2,7 +2,8 @@
 
 import { useEffect, useState } from 'react';
 
-import { Trans } from '@lingui/macro';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { ChevronDown, ChevronUp, Trash } from 'lucide-react';
 
 import { validateRadioField } from '@documenso/lib/advanced-fields-validation/validate-radio';
@@ -27,6 +28,8 @@ export const RadioFieldAdvancedSettings = ({
   handleFieldChange,
   handleErrors,
 }: RadioFieldAdvancedSettingsProps) => {
+  const { _ } = useLingui();
+
   const [showValidation, setShowValidation] = useState(false);
   const [values, setValues] = useState(
     fieldState.values ?? [{ id: 1, checked: false, value: 'Default value' }],
@@ -102,6 +105,18 @@ export const RadioFieldAdvancedSettings = ({
   return (
     <div className="flex flex-col gap-4">
       <div className="flex flex-col gap-4">
+        <div>
+          <Label>
+            <Trans>Label</Trans>
+          </Label>
+          <Input
+            id="label"
+            className="bg-background mt-2"
+            placeholder={_(msg`Field label`)}
+            value={fieldState.label}
+            onChange={(e) => handleFieldChange('label', e.target.value)}
+          />
+        </div>
         <div className="flex flex-row items-center gap-2">
           <Switch
             className="bg-background"

From 8c315f1ba641e4add89b8a797988cc6e00c973c3 Mon Sep 17 00:00:00 2001
From: Catalin Pit <25515812+catalinpit@users.noreply.github.com>
Date: Thu, 23 Jan 2025 16:33:05 +0200
Subject: [PATCH 2/3] chore: add label for checkbox field

---
 .../field-items-advanced-settings/checkbox-field.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/ui/primitives/document-flow/field-items-advanced-settings/checkbox-field.tsx b/packages/ui/primitives/document-flow/field-items-advanced-settings/checkbox-field.tsx
index d936adc3b8..e0596f8623 100644
--- a/packages/ui/primitives/document-flow/field-items-advanced-settings/checkbox-field.tsx
+++ b/packages/ui/primitives/document-flow/field-items-advanced-settings/checkbox-field.tsx
@@ -126,6 +126,18 @@ export const CheckboxFieldAdvancedSettings = ({
 
   return (
     <div className="flex flex-col gap-4">
+      <div className="mb-2">
+        <Label>
+          <Trans>Label</Trans>
+        </Label>
+        <Input
+          id="label"
+          className="bg-background mt-2"
+          placeholder={_(msg`Field label`)}
+          value={fieldState.label}
+          onChange={(e) => handleFieldChange('label', e.target.value)}
+        />
+      </div>
       <div className="flex flex-row items-center gap-x-4">
         <div className="flex w-2/3 flex-col">
           <Label>

From 204a9302643e5157395e5496938b509511148b92 Mon Sep 17 00:00:00 2001
From: Catalin Pit <25515812+catalinpit@users.noreply.github.com>
Date: Fri, 24 Jan 2025 14:38:03 +0200
Subject: [PATCH 3/3] chore: add label for radio field

---
 .../document-flow/advanced-fields/radio.tsx   | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/ui/primitives/document-flow/advanced-fields/radio.tsx b/packages/ui/primitives/document-flow/advanced-fields/radio.tsx
index 356aebfd82..ce2dedd6bf 100644
--- a/packages/ui/primitives/document-flow/advanced-fields/radio.tsx
+++ b/packages/ui/primitives/document-flow/advanced-fields/radio.tsx
@@ -32,16 +32,25 @@ export const RadioField = ({ field }: RadioFieldProps) => {
       ) : (
         <RadioGroup className="gap-y-1">
           {parsedFieldMeta.values?.map((item, index) => (
-            <div key={index} className="flex items-center gap-x-1.5">
-              <RadioGroupItem
-                className="dark:border-field-border pointer-events-none h-3 w-3"
-                value={item.value}
-                id={`option-${index}`}
-                checked={item.checked}
-              />
-              <Label htmlFor={`option-${index}`} className="text-xs font-normal text-black">
-                {item.value}
-              </Label>
+            <div key={index}>
+              <div className="flex flex-col">
+                {parsedFieldMeta?.label ? (
+                  <span className="text-center text-xs font-normal text-black">
+                    {parsedFieldMeta.label}
+                  </span>
+                ) : null}
+                <div className="flex items-center gap-x-1.5 pt-4">
+                  <RadioGroupItem
+                    className="dark:border-field-border pointer-events-none h-3 w-3"
+                    value={item.value}
+                    id={`option-${index}`}
+                    checked={item.checked}
+                  />
+                  <Label htmlFor={`option-${index}`} className="text-xs font-normal text-black">
+                    {item.value}
+                  </Label>
+                </div>
+              </div>
             </div>
           ))}
         </RadioGroup>