some tsx

Parts/Input.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import tw, { styled } from "twin.macro";
-import { useField as useFormikField, useFormikContext } from "formik";
+import tw from "twin.macro";
+import { useField as useFormikField, useFormikContext, FieldHookConfig } from "formik";
 //const useFormikField = null;
 //const useFormikContext = ()=>{};
 
@@ -9,37 +9,45 @@ export function useField(props){
   let getField = useFormikField;
   const context = useFormikContext();
   if(!context){
-    getField = (props)=>{
+    getField = (propsOrFieldName: FieldHookConfig<any>)=>{
       return [props, null, null];
     }
   }
   return getField(props);
 }
 
-export default function Input({ label, title, children, className, ...props }) {
+export default function Input(
+  props: React.InputHTMLAttributes<HTMLInputElement> & {
+    label?: React.ComponentPropsWithoutRef<"label">;
+    title?: string;
+    children?: React.ReactNode;
+    className?: string;
+  }
+) {
   /*name, id*/
-  props.id = props.id ?? props.name ?? title;
 
   const [field, meta, helpers] = useField(props);
 
   return (
-    <div css={[title && tw`my-1`, tw`relative`]} className={className}>
-      {title && (
+    <div css={[props.title && tw`my-1`, tw`relative`]} className={props.className}>
+      {props.title && (
         <label
-          {...label}
-          css={[tw`block text-secondary text-sm font-bold mb-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]}
         >
           {/*htmlFor={id ?? name ?? title}*/}
-          {title}
+          {props.title}
         </label>
       )}
       {/*name={name || title} id={id || name || title}*/}
       <input
+        id={props.id ?? props.name ?? props.title}
         {...props}
         {...field}
         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 "
       />
-      {children}
+      {props.children}
       {meta?.touched && meta.error ? (
         <div tw="text-[#c23c3c]">{meta.error}</div>
       ) : null}