Form: increase click area in checkbox and radiobutton components

FixMyBerlin · Oct 17, 2024 · 36f8639 · 36f8639
1 parent 6e5289d
commit 36f8639
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/core/components/forms/LabeledCheckbox.tsx b/src/core/components/forms/LabeledCheckbox.tsx
@@ -49,7 +49,7 @@ export const LabeledCheckbox = forwardRef<HTMLInputElement, LabeledCheckboxProps
             id={key}
             {...props}
             className={clsx(
-              "h-4 w-4 rounded",
+              "h-4 w-4 cursor-pointer rounded",
               hasError
                 ? "border-red-800 text-red-500 shadow-sm shadow-red-200 focus:ring-red-800"
                 : readonly || disabled
@@ -62,7 +62,7 @@ export const LabeledCheckbox = forwardRef<HTMLInputElement, LabeledCheckboxProps
           {...labelProps}
           htmlFor={key}
           className={clsx(
-            "ml-3 block whitespace-nowrap text-sm font-medium",
+            "block whitespace-nowrap pl-3 text-sm font-medium",
             readonly || disabled
               ? "text-gray-400"
               : "cursor-pointer text-gray-700 hover:text-gray-900",

diff --git a/src/core/components/forms/LabeledRadiobutton.tsx b/src/core/components/forms/LabeledRadiobutton.tsx
@@ -52,7 +52,7 @@ export const LabeledRadiobutton = forwardRef<HTMLInputElement, LabeledRadiobutto
             id={key}
             {...props}
             className={clsx(
-              "h-4 w-4",
+              "h-4 w-4 cursor-pointer",
               hasError
                 ? "border-red-800 text-red-500 shadow-sm shadow-red-200 focus:ring-red-800"
                 : readonly || disabled
@@ -65,7 +65,7 @@ export const LabeledRadiobutton = forwardRef<HTMLInputElement, LabeledRadiobutto
           {...labelProps}
           htmlFor={key}
           className={clsx(
-            "ml-3 block whitespace-nowrap text-sm font-medium",
+            "block whitespace-nowrap pl-3 text-sm font-medium",
             readonly || disabled
               ? "text-gray-400"
               : "cursor-pointer text-gray-700 hover:text-gray-900",