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

validate useForm : example
// in function page
const methods = useForm<FormSchemaType>({
      mode: 'onSubmit',
      resolver: zodResolver(FormSchema),
      defaultValues: {
           Multicheckbox: [],
      },
});
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 MulticheckboxOPTIONS = [
      { value: 'option 1', label: 'Option 1' },
      { value: 'option 2', label: 'Option 2' },
      { value: 'option 3', label: 'Option 3' },
      { value: 'option 4', label: 'Option 4' },
      { value: 'option 5', label: 'Option 5' },
      { value: 'option 6', label: 'Option 6' },
      { value: 'option 7', label: 'Option 7' },
      { value: 'option 8', label: 'Option 8' },
];

dom  : example
<Form methods={methods} onSubmit={onSubmit}>
      <fieldset className="form-fieldset">
            <div className="form-group">
                  <div className="col">
                        <FormControl fullWidth className="required">
                              <FormLabel>Label</FormLabel>
                              <Field.MultiCheckboxField
                                    name="Multicheckbox"
                                    options={MulticheckboxOPTIONS}
                                    sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }} />
                        </FormControl>
                  </div>
            </div>
            <Box className="form-action">
                  <Button type="submit" variant="contained" color="secondary" size="medium">
                        ส่ง
                  </Button>
            </Box>
      </fieldset>
</Form>