From cd8e2124c4124fd3e80967ec57c4284c2235d603 Mon Sep 17 00:00:00 2001
From: Nafees Nazik <84864519+G3root@users.noreply.github.com>
Date: Tue, 18 Apr 2023 13:21:03 +0530
Subject: [PATCH] fix: check box (#8328)

Co-authored-by: Bailey Pumfleet <bailey@pumfleet.co.uk>
---
 packages/features/form-builder/Components.tsx  | 18 +++++++++++++-----
 .../ui/components/form/checkbox/Checkbox.tsx   |  2 +-
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/features/form-builder/Components.tsx b/packages/features/form-builder/Components.tsx
index 0a540285b3..672021c628 100644
--- a/packages/features/form-builder/Components.tsx
+++ b/packages/features/form-builder/Components.tsx
@@ -9,7 +9,17 @@ import type {
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { BookingFieldType } from "@calcom/prisma/zod-utils";
-import { PhoneInput, AddressInput, Button, Label, Group, RadioField, EmailField, Tooltip } from "@calcom/ui";
+import {
+  PhoneInput,
+  AddressInput,
+  Button,
+  Label,
+  Group,
+  RadioField,
+  EmailField,
+  Tooltip,
+  Checkbox,
+} from "@calcom/ui";
 import { UserPlus, X } from "@calcom/ui/components/icon";
 
 import { ComponentForField } from "./FormBuilder";
@@ -364,8 +374,7 @@ export const Components: Record<BookingFieldType, Component> = {
     factory: ({ readOnly, label, value, setValue }) => {
       return (
         <div className="flex">
-          <input
-            type="checkbox"
+          <Checkbox
             onChange={(e) => {
               if (e.target.checked) {
                 setValue(true);
@@ -373,12 +382,11 @@ export const Components: Record<BookingFieldType, Component> = {
                 setValue(false);
               }
             }}
-            className="border-default disabled:bg-emphasis disabled:dark:text-subtle text-emphasis h-4 w-4 rounded focus:ring-black ltr:mr-2 rtl:ml-2"
             placeholder=""
             checked={value}
             disabled={readOnly}
+            description={label ?? ""}
           />
-          <Label className="text-emphasis -mt-px block text-sm font-medium">{label}</Label>
         </div>
       );
     },
diff --git a/packages/ui/components/form/checkbox/Checkbox.tsx b/packages/ui/components/form/checkbox/Checkbox.tsx
index 30e41f94dd..c5ea496b1f 100644
--- a/packages/ui/components/form/checkbox/Checkbox.tsx
+++ b/packages/ui/components/form/checkbox/Checkbox.tsx
@@ -53,7 +53,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
                     type="checkbox"
                     disabled={disabled}
                     className={classNames(
-                      "text-primary-600 focus:ring-primary-500 border-default h-4 w-4 rounded ltr:mr-2 rtl:ml-2 ",
+                      "text-primary-600 focus:ring-primary-500 border-default bg-default h-4 w-4 rounded ltr:mr-2 rtl:ml-2",
                       !error && disabled
                         ? "bg-gray-300 checked:bg-gray-300"
                         : "hover:bg-subtle checked:bg-gray-800",