Is it possible to display the contents of a zod objects description?

[devklick]

With Zod it is possible to give a description to a schema, for example:

const mySchema = z.object({
  name: z.string().describe('The name of the thing')
});
type MyType = z.infer<typeof mySchema>;

When using the zod resolver, is it possible to access and display this information? For example:

const {
  register,
  handleSubmit,  
  formState: { errors, descriptions },
} = useForm<MyType>({
  resolver: zodResolver(mySchema),
});

return (
  <form onSubmit={handleSubmit((d) => console.log(d))}>
    <input {...register("name")} />
    <p>{descriptions.name}</p>
    {errors.name?.message && <p>{errors.name?.message}</p>}
  </form>
);

Note that descriptions does not exist on the formState object. I'm just wondering if something along these lines is possible so I can pull out and use the description when rendering the name input field.

[leapful]

@devklick

No, there is no support to get description from zod schema via react-hook-form but you extract zod schema into a separated module then import it everywhere you need to access schema field.

For example:

// schema.ts

const schema = z.object({
  name: z.string().describe('This is a name')
})

export default schema;


// Form.tsx

import schema from './schema';

const Form = () => {
   console.log(schema.shape.name.description);

   return <form>...</form>;
}

[ntubrian]

It seems like the generated instance via .and method, havs no property named "shape".

say const schemaC = A.and(B)

schemaC.shape (X)