fix: form component ui

Author: taku10101

src/components/form/InputField.tsx

@@ -1,4 +1,5 @@
 import { useFormContext } from "react-hook-form";
+import { Input } from "../ui/Field";
 
 type Props = {
     name: string;
@@ -9,7 +10,7 @@ function InputField(props: Props) {
 
     return (
         <>
-            <input {...methods.register(props.name)} />
+            <Input {...methods.register(props.name)} />
             {methods.formState.errors[props.name] && (
                 <p>{methods.formState.errors[props.name]?.message as string}</p>
             )}

src/components/form/SampleForm.tsx

@@ -2,8 +2,9 @@ import { useForm, FormProvider } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import InputField from "./InputField";
 import SelectField from "./SelectField";
-import { Button } from "../ui/Button/Button";
+import { Button } from "../ui/Button/";
 import { z } from "zod";
+import { Form } from "../ui/Form";
 const sampleFormSchema = z.object({
     input: z.string().min(1),
     select: z.string().min(1),
@@ -16,11 +17,11 @@ const SampleForm = () => {
     const { handleSubmit } = methods;
     return (
         <FormProvider {...methods}>
-            <form onSubmit={handleSubmit((data) => console.log(data))}>
+            <Form onSubmit={handleSubmit((data) => console.log(data))}>
                 <InputField name='input' />
                 <SelectField name='select' />
                 <Button type='submit'>Submit</Button>
-            </form>
+            </Form>
         </FormProvider>
     );
 }

src/components/form/SelectField.tsx

@@ -1,4 +1,5 @@
 import { useFormContext } from "react-hook-form";
+import { Select } from "../ui/Select";
 const options = ["", "one", "two", "three"];
 type Props = {
     name: string;
@@ -7,13 +8,13 @@ function SelectField(props: Props) {
     const methods = useFormContext();
     return (
         <>
-            <select {...methods.register(props.name)}>
+            <Select {...methods.register(props.name)}>
                 {options.map((value) => (
                     <option key={value} value={value}>
                         {value}
                     </option>
                 ))}
-            </select>
+            </Select>
 
             {methods.formState.errors[props.name] && (
                 <p>{methods.formState.errors[props.name]?.message as string}</p>