import : 
import Chip from '@mui/material/Chip'; 
import Button from '@mui/material/Button'; 
import "@/assets/scss/components/button.scss"; 
import "@/assets/scss/components/form.scss";

validate form: 
import { Form, Field } from "@/components/hook-form"; 
import { zodResolver } from '@hookform/resolvers/zod'; 
import { useForm } from 'react-hook-form'; 
import { z as zod } from "zod/v4"; 

schema : setting form example
Defining schemas  : https://zod.dev/api
const FormSchema = zod.object({
     // Defining schemas
     AutoComplete: zod.preprocess(
            (val) => (typeof val === 'string' ? val : ""),
            zod.string().min(1, { message: "กรุณาเลือก AutoComplete!" })
      ) as any,
     // .optional() ใส่เพื่อไม่บังคับกรอก
});
type FormSchemaType = zod.infer < typeof FormSchema >

validate useForm : example
// in function page
const methods = useForm<FormSchemaType>({
      mode: 'onSubmit',
      resolver: zodResolver(FormSchema),
      defaultValues: {
           AutoComplete: '',
      },
});
const{ watch,  handleSubmit,} = methods;
const value = watch()
console.log(value);
const onSubmit = handleSubmit((data) => {
      try {
            console.log(data);
      } catch (error) {
            console.log(error);
      }
}data);

const _AutoCompletes = [
      `AutoComplete 1`,
      `AutoComplete 2`,
      `AutoComplete 3`,
      `AutoComplete 4`,
];

dom  : example
<Form methods={methods} onSubmit={onSubmit}>
      <fieldset className="form-fieldset">
            <div className="form-group">
                  <Field.AutocompleteField
                        label="AutoComplete"
                        name="AutoComplete"
                        slotProps={{
                              textfield: {
                                    required: true,
                              },
                        }}
                        options={_AutoCompletes.map((option) => option)}
                        getOptionLabel={(option) => option}
                        renderOption={(props, option) => (
                              <li {...props} key={option}>
                                     {option}
                              </li>
                        )}
                        renderTags={(selected, getTagProps) =>
                              selected.map((option, index) => (
                                    <Chip {...getTagProps({ index })}
                                          key={option}
                                          label={option}
                                          size="small"
                                          color="info"
                                          variant="outlined"
                                    />
                              ))
                        }
                  />
            </div>
            <Box className="form-action">
                  <Button type="submit" variant="contained" color="secondary" size="medium">
                        ส่ง
                  </Button>
            </Box>
      </fieldset>
</Form>