import : 
import MenuItem from '@mui/material/MenuItem'; 
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
     select: zod.string().min(
            1, { message: 'กรุณาเลือก select!'}
      )
     // .optional() ใส่เพื่อไม่บังคับกรอก
});
type FormSchemaType = zod.infer < typeof FormSchema >

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

dom  : example
<Form methods={methods} onSubmit={onSubmit}>
      <fieldset className="form-fieldset">
            <div className="form-group">
                  <div className="col">
                        <Field.SelectField name="select" label="select" className="required">
                              <MenuItem value="select 1">select 1</MenuItem>
                              <MenuItem value="select 2">select 2</MenuItem>
                              <MenuItem value="select 3">select 3</MenuItem>
                        </Field.SelectField>
                  </div>
            </div>
            <Box className="form-action">
                  <Button type="submit" variant="contained" color="secondary" size="medium">
                        ส่ง
                  </Button>
            </Box>
      </fieldset>
</Form>