refactor (Input Checkbox): 🎉 update checkbox style and add label

robolaunch · Sep 13, 2023 · 605fa5c · 605fa5c
1 parent 4509c86
commit 605fa5c
Showing 1 changed file with 18 additions and 10 deletions.
diff --git a/src/components/InputCheckbox/InputCheckbox.tsx b/src/components/InputCheckbox/InputCheckbox.tsx
@@ -20,15 +20,23 @@ export default function InputCheckbox({
   disabled,
 }: InputCheckboxProps): ReactElement {
   return (
-    <input
-      ref={ref}
-      disabled={disabled}
-      className={`scale-150 outline-none accent-primary ${className}`}
-      onChange={onChange}
-      onBlur={onBlur}
-      name={name}
-      type="checkbox"
-      checked={value}
-    />
+    <div className="flex gap-2">
+      <label
+        className="min-w-fit flex flex-wrap gap-1 text-xs font-medium text-layer-light-700"
+        htmlFor={name}
+      >
+        {name}
+      </label>
+      <input
+        ref={ref}
+        disabled={disabled}
+        className={`scale-150 outline-none accent-primary ${className}`}
+        onChange={onChange}
+        onBlur={onBlur}
+        name={name}
+        type="checkbox"
+        checked={value}
+      />
+    </div>
   );
 }