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

validate useForm : example
// in function page
const methods = useForm<FormSchemaType>({
      mode: 'onSubmit',
      resolver: zodResolver(FormSchema),
      defaultValues: {
           radioGroup: '',
      },
});
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">
                        <FormControl fullWidth className="required">
                              <Field.RadioField
                                    name="radioGroup"
                                    label="label RadioGroup"
                                    options={[
                                          { label: 'Option 1', value: 'radio-1' },
                                          { label: 'Option 2', value: 'radio-2' },
                                          { label: 'Option 3', value: 'radio-3' },
                                    ]}
                                    sx={{ gap: 0.75 }} />
                        </FormControl>
                  </div>
            </div>
            <Box className="form-action">
                  <Button type="submit" variant="contained" color="secondary" size="medium">
                        ส่ง
                  </Button>
            </Box>
      </fieldset>
</Form>