Accessing Zod Field Descriptions

[nikolailehbrink]

I would like to access the description property defined in my Zod schema from the Conform fields object on the client side. This would allow me to display helpful descriptions alongside errors in my form.

Use Case

Currently, Conform provides an easy way to access field names and errors:

<div>{fields.password.errors}</div>

However, I would also like to access descriptions that I define in my Zod schema, like this:

const schema = z.object({
  username: z.string().describe("Your unique identifier"),
  password: z.string().describe("At least 8 characters long"),
});

On the client side, I would ideally be able to render the description:

<div>{fields.password.description}</div>

This would improve the user experience by displaying additional contextual information.

Additionally, in my project, I use components from shadcn for building forms. Optimally, I would like to be able to pass the description from Zod directly into FormDescription, like so:

<FormDescription>
  {fields.username.description}
</FormDescription>

For example, in my current setup, I manually define the description like this:

<FormDescription>
  This is your public display name.
</FormDescription>

If Conform could automatically retrieve the description from the Zod schema, it would make integration much smoother.

Question

Is there currently a way to access description from the fields object in Conform? If not, would it be possible to include it in the Conform field metadata?

Thanks for your work on this library! Looking forward to your insights.

[chimame]

Thank you for your suggestion.

I have checked whether the proposed function can be implemented at present. To conclude, it will be difficult to implement immediately. Also, how about using the following as an alternative?

const schema = z.object({
  username: z.string().describe("Your unique identifier"),
  password: z.string().describe("At least 8 characters long"),
});

console.log(schema.shape.username.description);

First of all, Conform, i.e. useForm, does not access Schema. Therefore, to implement this proposal, a new process is required to obtain the description data of the Schema passed from APIs such as useForm. Furthermore, not only Zod but also Valibot can define descriptions, so a separate process to obtain the description for each Schema library will be required.

Conform is made up of several packages, and considering the dependencies between each package, it would be better to place such a process to obtain the description in @conform-to/zod, but useFrom exists in @conform-to/react. There is currently no dependency between @conform-to/zod and @conform-to/react. Therefore, it is a bit difficult to read the description from the Schema internally, that is, to read Zod's Schema from useForm.

If I were to implement this proposal, I think I would implement a process in @conform-to/zod to get description data from the schema, and pass the return value to the useFrom option. However, it seems difficult to implement this right now.

[nikolailehbrink]

Hi @chimame!
Thank you for the detailed response! Never knew about schema.shape. I will use this then!