select input added where necessary

package.json

@@ -15,6 +15,7 @@
     "formik": "2.4.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
     "react-redux": "^8.0.5",
     "react-router-dom": "6.3.0",
     "react-select": "^5.8.0",

src/components/Dashboard/DashboardFormInit.tsx

@@ -31,15 +31,18 @@ export default function DashboardFormInit({handleNextStep}:Props) {
           name="applyIshInput"
           label="For How Many Months?"
           labelClass="font-bold text-[1.125rem]"
-          input
-          inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-          placeholder="12 Months"
+          select={true}
+          selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+          // selectValue=''
+          selectOptions={duration}
+          // onChange={()=>{}}
         />
         <InputCompOne
           parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
           name="applyIshInput"
           label="Direct sales agent ID ( Optional )"
           labelClass="font-bold text-[1.125rem]"
+          floatLabel='Enter agent ID'
           input
           inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
           placeholder="Agent ID"
@@ -54,3 +57,17 @@ export default function DashboardFormInit({handleNextStep}:Props) {
     </div>
   );
 }
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+
+const duration: Option[] = [
+  { value: "", label: "Please Select" },
+  { value: "6", label: "6 Months" },
+  { value: "12", label: "12 Months" },
+  { value: "18", label: "18 Months" },
+  { value: "24", label: "24 Months" },
+];

src/components/Dashboard/home/DashboardHomeAttestation.tsx

@@ -14,15 +14,15 @@ export default function DashboardHomeAttestation({handleNextStep}:Props) {
       <div className="w-full flex justify-center">
         <Stepper step={4} />
       </div>
-      <div className="mt-[3.25rem] flex flex-col gap-9">
-        <p className='text-red-500 text-lg md:text-2xl'>Applicant's Attestation and Debit Instruction</p>
-        <p className='text-red-500 text-base'>NB: Must be your FCMB account number</p>
+      <p className='my-10 text-red-500 text-lg md:text-2xl'>Applicant's Attestation and Debit Instruction</p>
+      <p className='text-red-500 text-base'>NB: Must be your FCMB account number</p>
+      <div className="flex flex-col gap-9">
         <div className="flex items-center gap-[4.125rem]">
           <InputCompOne
             parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
             name="applyIshInput"
-            label="Disbursement account number"
-            labelClass="font-bold text-[1.125rem]"
+            floatLabel="Disbursement account number"
+            // labelClass="font-bold text-[1.125rem]"
             input
             inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
             placeholder="0102547896"

src/components/Dashboard/home/DashboardHomeDetail.tsx

@@ -17,9 +17,11 @@ export default function DashboardHomeDetail({handleNextStep}:Props) {
             name="applyIshInput"
             label="Select your gender"
             labelClass="font-bold text-[1.125rem]"
-            input
-            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-            placeholder="Male"
+            select={true}
+            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            // selectValue=''
+            selectOptions={gender}
+            // onChange={()=>{}}
           />
           <InputCompOne
             parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
@@ -37,18 +39,22 @@ export default function DashboardHomeDetail({handleNextStep}:Props) {
             name="applyIshInput"
             label="Marital status"
             labelClass="font-bold text-[1.125rem]"
-            input
-            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-            placeholder="Single"
-          />{" "}
+            select={true}
+            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            // selectValue=''
+            selectOptions={maritalStatus}
+            // onChange={()=>{}}
+          />
           <InputCompOne
             parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
             name="applyIshInput"
             label="Select your state"
             labelClass="font-bold text-[1.125rem]"
-            input
-            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-            placeholder="Lagos"
+            select={true}
+            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            // selectValue=''
+            selectOptions={state}
+            // onChange={()=>{}}
           />
         </div>
         <InputCompOne
@@ -70,3 +76,30 @@ export default function DashboardHomeDetail({handleNextStep}:Props) {
     </div>
   );
 }
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+
+const gender: Option[] = [
+  { value: "", label: "Please Select" },
+  { value: "male", label: "Male" },
+  { value: "female", label: "Female" },
+  { value: "others", label: "Prefer not to say" },
+];
+
+const maritalStatus: Option[] = [
+  { value: "", label: "Please Select" },
+  { value: "single", label: "Single" },
+  { value: "married", label: "Married" },
+  { value: "divorced", label: "Divorced" },
+];
+
+const state: Option[] = [
+  { value: "", label: "Please Select" },
+  { value: "abia", label: "Abia" },
+  { value: "imo", label: "Imo" },
+  { value: "lagos", label: "Lagos" },
+];

src/components/Dashboard/home/DashboardHomeEmploymentInfo.tsx

@@ -16,8 +16,8 @@ export default function DashboardHomeEmploymentInfo({handleNextStep}:Props) {
           <InputCompOne
             parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
             name="applyIshInput"
-            label="Job Title"
-            labelClass="font-bold text-[1.125rem]"
+            floatLabel="Job Title"
+            // labelClass="font-bold text-[1.125rem]"
             input
             inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
             placeholder="Software Engineer"
@@ -25,8 +25,8 @@ export default function DashboardHomeEmploymentInfo({handleNextStep}:Props) {
           <InputCompOne
             parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
             name="applyIshInput"
-            label="Employer name"
-            labelClass="font-bold text-[1.125rem]"
+            floatLabel="Employer name"
+            // labelClass="font-bold text-[1.125rem]"
             input
             inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
             placeholder="Mr. Mark John"
@@ -36,28 +36,32 @@ export default function DashboardHomeEmploymentInfo({handleNextStep}:Props) {
           <InputCompOne
             parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
             name="applyIshInput"
-            label="Job Sector"
-            labelClass="font-bold text-[1.125rem]"
-            input
-            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-            placeholder="Technology"
+            floatLabel="Job Sector"
+            // labelClass="font-bold text-[1.125rem]"
+            select={true}
+            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            // selectValue=''
+            selectOptions={jobSection}
+            // onChange={()=>{}}
           />
           <InputCompOne
             parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
             name="applyIshInput"
-            label="Sector"
-            labelClass="font-bold text-[1.125rem]"
-            input
-            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-            placeholder="Engineering"
+            floatLabel="Select your industry"
+            // labelClass="font-bold text-[1.125rem]"
+            select={true}
+            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+            // selectValue=''
+            selectOptions={industry}
+            // onChange={()=>{}}
           />
         </div>
         <div className="flex items-center gap-[4.125rem]">
           <InputCompOne
             parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
             name="applyIshInput"
-            label="Date of resumption"
-            labelClass="font-bold text-[1.125rem]"
+            floatLabel="Date of resumption"
+            // labelClass="font-bold text-[1.125rem]"
             input
             inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
             placeholder="12/12/2015"
@@ -65,8 +69,8 @@ export default function DashboardHomeEmploymentInfo({handleNextStep}:Props) {
           <InputCompOne
             parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
             name="applyIshInput"
-            label="Employers official email"
-            labelClass="font-bold text-[1.125rem]"
+            floatLabel="Employers official email"
+            // labelClass="font-bold text-[1.125rem]"
             input
             inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
             placeholder="example@gmail.com"
@@ -76,8 +80,8 @@ export default function DashboardHomeEmploymentInfo({handleNextStep}:Props) {
           <InputCompOne
             parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
             name="applyIshInput"
-            label="Annual Income"
-            labelClass="font-bold text-[1.125rem]"
+            floatLabel="Annual Income"
+            // labelClass="font-bold text-[1.125rem]"
             input
             inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
             placeholder="1,200,000"
@@ -85,8 +89,8 @@ export default function DashboardHomeEmploymentInfo({handleNextStep}:Props) {
           <InputCompOne
             parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
             name="applyIshInput"
-            label="Net monthly salary"
-            labelClass="font-bold text-[1.125rem]"
+            floatLabel="Net monthly salary"
+            // labelClass="font-bold text-[1.125rem]"
             input
             inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
             placeholder="100,000"
@@ -96,8 +100,8 @@ export default function DashboardHomeEmploymentInfo({handleNextStep}:Props) {
           <InputCompOne
             parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
             name="applyIshInput"
-            label="Salary payment date"
-            labelClass="font-bold text-[1.125rem]"
+            floatLabel="Salary payment date"
+            // labelClass="font-bold text-[1.125rem]"
             input
             inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
             placeholder="30th of every month"
@@ -105,8 +109,8 @@ export default function DashboardHomeEmploymentInfo({handleNextStep}:Props) {
           <InputCompOne
             parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
             name="applyIshInput"
-            label="Employee ID"
-            labelClass="font-bold text-[1.125rem]"
+            floatLabel="Employee ID"
+            // labelClass="font-bold text-[1.125rem]"
             input
             inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
             placeholder="LS/001/005"
@@ -115,11 +119,13 @@ export default function DashboardHomeEmploymentInfo({handleNextStep}:Props) {
         <InputCompOne
           parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
           name="applyIshInput"
-          label="Highest level of education"
-          labelClass="font-bold text-[1.125rem]"
-          input
-          inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-          placeholder="B.sc"   
+          floatLabel="Highest level of education"
+          // labelClass="font-bold text-[1.125rem]"
+          select={true}
+          selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+          // selectValue=''
+          selectOptions={qualification}
+          // onChange={()=>{}}
         />
         <Button
           className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
@@ -131,3 +137,26 @@ export default function DashboardHomeEmploymentInfo({handleNextStep}:Props) {
     </div>
   );
 }
+
+
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+
+const jobSection: Option[] = [
+  { value: "", label: "Please Select" },
+  { value: "private (non academic)", label: "Private (non academic)" },
+];
+
+const industry: Option[] = [
+  { value: "", label: "Please Select" },
+  { value: "engineering", label: "Engineering" },
+];
+
+const qualification: Option[] = [
+  { value: "", label: "Please Select" },
+  { value: "b.sc + professional qualification", label: "B.Sc + Professional Qualification" },
+];

src/components/Dashboard/home/DashboardHomeRefereeInfo.tsx

@@ -13,13 +13,14 @@ export default function DashboardHomeRefereeInfo({handleNextStep}:Props) {
       <div className="mt-[3.25rem] flex flex-col gap-9">
         <p className='text-red-500 text-lg md:text-2xl'>Reference Details <span className='text-base'>(Must be 18 years and above)</span></p>
         <div className="flex items-center gap-[4.125rem]">
-            <div className='max-w-[25.875rem] w-full flex flex-col gap-9'>
-                <p className='text-red-500 text-base'>Reference one</p>
+          <div className='w-full max-w-[25.875rem]'>
+            <p className='text-red-500 text-base'>Reference one</p>
+            <div className='w-full flex flex-col gap-9'>
                 <InputCompOne
                     parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                     name="applyIshInput"
-                    label="Full name"
-                    labelClass="font-bold text-[1.125rem]"
+                    floatLabel="Full name"
+                    // labelClass="font-bold text-[1.125rem]"
                     input
                     inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                     placeholder="John James"
@@ -27,8 +28,8 @@ export default function DashboardHomeRefereeInfo({handleNextStep}:Props) {
                 <InputCompOne
                     parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                     name="applyIshInput"
-                    label="Relationship"
-                    labelClass="font-bold text-[1.125rem]"
+                    floatLabel="Relationship"
+                    // labelClass="font-bold text-[1.125rem]"
                     input
                     inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                     placeholder="Sister"
@@ -36,8 +37,8 @@ export default function DashboardHomeRefereeInfo({handleNextStep}:Props) {
                 <InputCompOne
                     parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                     name="applyIshInput"
-                    label="Phone number"
-                    labelClass="font-bold text-[1.125rem]"
+                    floatLabel="Phone number"
+                    // labelClass="font-bold text-[1.125rem]"
                     input
                     inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                     placeholder="07000000000"
@@ -45,8 +46,8 @@ export default function DashboardHomeRefereeInfo({handleNextStep}:Props) {
                 <InputCompOne
                     parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                     name="applyIshInput"
-                    label="Email address"
-                    labelClass="font-bold text-[1.125rem]"
+                    floatLabel="Email address"
+                    // labelClass="font-bold text-[1.125rem]"
                     input
                     inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                     placeholder="demo@gamil.com"
@@ -54,71 +55,65 @@ export default function DashboardHomeRefereeInfo({handleNextStep}:Props) {
                 <InputCompOne
                     parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                     name="applyIshInput"
-                    label="BVN"
-                    labelClass="font-bold text-[1.125rem]"
+                    floatLabel="BVN"
+                    // labelClass="font-bold text-[1.125rem]"
                     input
                     inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                     placeholder="2228457896"
                 />
             </div>
-          <div className='max-w-[25.875rem] w-full flex flex-col gap-9'>
-            <p className='text-red-500 text-base'>Reference one</p>
-            <InputCompOne
-                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                    name="applyIshInput"
-                    label="Full name"
-                    labelClass="font-bold text-[1.125rem]"
-                    input
-                    inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                    placeholder="John James"
-                />
-                <InputCompOne
-                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                    name="applyIshInput"
-                    label="Relationship"
-                    labelClass="font-bold text-[1.125rem]"
-                    input
-                    inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                    placeholder="Sister"
-                />
-                <InputCompOne
-                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                    name="applyIshInput"
-                    label="Phone number"
-                    labelClass="font-bold text-[1.125rem]"
-                    input
-                    inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                    placeholder="07000000000"
-                />
-                <InputCompOne
-                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                    name="applyIshInput"
-                    label="Email address"
-                    labelClass="font-bold text-[1.125rem]"
-                    input
-                    inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                    placeholder="demo@gamil.com"
-                />
-                <InputCompOne
-                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                    name="applyIshInput"
-                    label="BVN"
-                    labelClass="font-bold text-[1.125rem]"
-                    input
-                    inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                    placeholder="2228457896"
-                />
           </div>
+            <div className='w-full max-w-[25.875rem]'>
+              <p className='text-red-500 text-base'>Reference two</p>
+              <div className='w-full flex flex-col gap-9'>
+                <InputCompOne
+                        parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                        name="applyIshInput"
+                        floatLabel="Full name"
+                        // labelClass="font-bold text-[1.125rem]"
+                        input
+                        inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                        placeholder="John James"
+                    />
+                    <InputCompOne
+                        parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                        name="applyIshInput"
+                        floatLabel="Relationship"
+                        // labelClass="font-bold text-[1.125rem]"
+                        input
+                        inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                        placeholder="Sister"
+                    />
+                    <InputCompOne
+                        parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                        name="applyIshInput"
+                        floatLabel="Phone number"
+                        // labelClass="font-bold text-[1.125rem]"
+                        input
+                        inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                        placeholder="07000000000"
+                    />
+                    <InputCompOne
+                        parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                        name="applyIshInput"
+                        floatLabel="Email address"
+                        // labelClass="font-bold text-[1.125rem]"
+                        input
+                        inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                        placeholder="demo@gamil.com"
+                    />
+                    <InputCompOne
+                        parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
+                        name="applyIshInput"
+                        floatLabel="BVN"
+                        // labelClass="font-bold text-[1.125rem]"
+                        input
+                        inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                        placeholder="2228457896"
+                    />
+              </div>
+            </div>
         </div>
-        <InputCompOne
-          parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-          name="applyIshInput"
-          label="Highest level of education"
-          labelClass="font-bold text-[1.125rem]"
-          input
-          inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-          placeholder="B.sc"   
-        />
         <Button
           className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
           text="Next"

src/components/Icons/Icons.tsx

@@ -1,10 +1,13 @@
+import { FaCaretDown } from "react-icons/fa";
+
 import dashIcon from "../../assets/images/dashboard/dashDefault.svg";
 type Props = {
   name: string;
   fillColor?: string;
+  className?:string;
 };
 
-export default function Icons({ name, fillColor }: Props) {
+export default function Icons({ name, fillColor, className }: Props) {
   return (
     <>
       {name == "home" ? (
@@ -106,7 +109,9 @@ export default function Icons({ name, fillColor }: Props) {
             fill={fillColor ? fillColor : "#FFF"}
           />
         </svg>
-      ) : name == "dash-icon" ? (
+      ) :name == 'arrow-down'?
+          <FaCaretDown className={`text-xl ${className && className}`} />
+        :name == "dash-icon" ? (
         <img src={dashIcon} alt="dash-icon" />
       ) : null}
     </>

src/components/shared/InputCompOne.tsx

@@ -1,10 +1,12 @@
 import React, { forwardRef } from "react";
+import { Icons } from "../Icons";
 
 export interface InputCompOneProps {
-  label: string;
-  labelClass: string;
+  label?: string;
+  labelClass?: string;
   labelSpan?: string;
   labelSpanClass?: string;
+  floatLabel?: string;
   placeholder?: string;
   value?: string;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -20,7 +22,6 @@ export interface InputCompOneProps {
   inputClass?: string;
   parentInputClass?: string;
   selectClass?: string;
-  parentSelectClass?: string;
   parentClass?: string;
   maxLength?: number;
   error?: string;
@@ -33,6 +34,7 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
       labelClass,
       labelSpan,
       labelSpanClass,
+      floatLabel,
       placeholder,
       value,
       onChange,
@@ -47,7 +49,6 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
       inputClass,
       parentInputClass,
       selectClass,
-      parentSelectClass,
       parentClass,
       maxLength,
       error,
@@ -57,14 +58,14 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
     return (
       <div className={parentClass}>
         {label && (
-          <label htmlFor="" className={labelClass}>
+          <label htmlFor={label ? label : floatLabel} className={labelClass}>
             {label}
             {labelSpan && <span className={labelSpanClass}>{labelSpan}</span>}
             {error && <span className='text-[10px] text-red-500'>{error}</span>}
           </label>
         )}
         {input && (
-          <div className={parentInputClass}>
+          <div className={`relative ${parentInputClass}`}>
             <input
               type={inputType}
               placeholder={placeholder}
@@ -74,18 +75,26 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
               name={name}
               tabIndex={tabIndex}
               ref={forwardedRef}
-              className={inputClass}
+              className={`px-4 ${floatLabel && 'peer pt-4 placeholder:text-transparent'} ${inputClass}`}
               maxLength={maxLength}
+              id={label ? label : floatLabel}
             />
+            {floatLabel &&
+              <label
+                htmlFor={label ? label : floatLabel}
+                className={`cursor-pointer text-sm text-black/70 dark:text-white absolute left-4 top-0 translate-y-0 peer-focus:top-0 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500`}
+              >{floatLabel}</label>
+            }
           </div>
         )}
         {select && (
-          <div className={parentSelectClass}>
+          <div className={`relative ${parentInputClass}`}>
             <select
               name={name}
-              id=""
+              id={label ? label : floatLabel}
               value={selectValue}
-              className={selectClass}
+              className={`px-4 appearance-none ${floatLabel && 'peer pt-4'} ${selectClass}`}
+              // onChange={onChange}
             >
               {selectOptions.map(({ value, label }) => (
                 <option key={value} value={value}>
@@ -93,6 +102,16 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
                 </option>
               ))}
             </select>
+            {floatLabel &&
+              <label
+                htmlFor={label ? label : floatLabel}
+                className={`cursor-pointer text-sm text-black/70 dark:text-white absolute left-4 top-0 translate-y-0 peer-focus:top-0 peer-focus:translate-y-0 transition-all duration-500`}
+              >{floatLabel}</label>
+            }
+            {/* select custon arrow */}
+            <div className='absolute right-4 top-1/2 -translate-y-1/2'>
+              <Icons name='arrow-down' />
+            </div>
           </div>
         )}
       </div>