Fixed up checkbox

Parts/Input.tsx

@@ -6,8 +6,8 @@ import { IMaskInput, IMaskInputProps, IMaskMixinProps } from 'react-imask';
 //const useFormikField = null;
 //const useFormikContext = ()=>{};
 
-export function useField(props) {
-  let getField = useFormikField;
+export function useField<Val=any>(props) {
+  let getField = useFormikField<Val>;
   const context = useFormikContext();
   if (!context) {
     getField = (propsOrFieldName: FieldHookConfig<any>) => {
@@ -45,8 +45,8 @@ export default function Input(
       {/*name={name || title} id={id || name || title}*/}
       <input
         id={props.id ?? props.name ?? props.title}
-        {...otherProps as any}
         {...field}
+        {...otherProps as any}
         tw="bg-primary appearance-none border-2 border-secondary rounded w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-secondary focus:border-accent transition duration-150 "
       />
       {props.children}
@@ -147,37 +147,41 @@ export function TextArea({
  * @param {Object} props... - Additional properties for the checkbox input.
  * @return {ReactElement} The rendered CheckBox component.
  */
-export function CheckBox({
-  label,
-  title,
+export function CheckBox(
+  props: (Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "checked"> | Omit<FieldHookConfig<boolean>, "value">) & {
+    label?: React.ComponentPropsWithoutRef<"label">;
+    title?: string;
+    children?: React.ReactNode;
+    className?: string;
+    value?: boolean
+  }
+) {
+  /*name, id*/
+  const { children, ...otherProps } = props;
 
-  children,
-  ...props
-}) {
-
-  const [field, meta, helpers] = useField(props);
+  const [field, meta, helpers] = useField<boolean>(otherProps);
 
   return (
     <div tw="my-1 flex text-secondary">
       <input
-        checked={field.value}
-        {...props}
+        id={props.id ?? props.name ?? props.title}
+        checked={otherProps?.value == undefined ? field.value : otherProps?.value}
         {...field}
+        {...otherProps as any}
         type="checkbox"
         tw="checked:bg-accent w-6 h-6 rounded-full bg-secondary border-secondary border-4 appearance-none cursor-pointer "
       />
-      {title != null ? (
+      {props.title && (
         <label
-          {...label}
-          css={[tw`block font-bold px-2`, label?.css]}
+          {...props.label}
+          htmlFor={props.id ?? props.name ?? props.title}
+          css={[tw`block text-secondary text-sm font-bold mb-2`, props.label?.css]}
         >
-          {title}
+          {/*htmlFor={id ?? name ?? title}*/}
+          {props.title}
         </label>
-      ) : null}
+      )}
       {children}
-      {meta?.touched && meta.error ? (
-        <div tw="text-[#c23c3c]">{meta.error}</div>
-      ) : null}
     </div>
   );
 }