UX on forms

[elie-h]

Great repo and example, I was hoping to use this repo as a guiding example on how to implement server actions and forms with the new paradigm. But I'm struggling to see how this new simple model of form management can be used without serious degradations to form UX.

Some observations & questions:

• By default the submission of the action clears out the form, when the form errors this is highly undesirable as the user has to re-input all the previous values, what's the recommended pattern here to addressing this?
• Lack of client side validation on forms, ideally validation can be done on the client side too to show instant feedback & save a roundtrip to the server.
• Lack of error messages per field, showing a global error for the whole form isn't great UX, ideally the specific input element is highlighted to the user with a local error. This is also necessary for showing multiple errors for a given form submission.
• Showing a toast after submission is a common pattern, how can this be done post submission? is this just a simple useEffect to watch the state of the form's submission or is there a cleaner way of doing this?

A code snippet that addresses these points will be very beneficial.

[leerob]

1. Here's an example of one of the forms where I'm keeping the client inputs: https://github.com/leerob/next-saas-starter/blob/b9bfeedc6f27558c15b9c3562e78e883cdca5c2a/app/(dashboard)/dashboard/general/page.tsx#L24-L36
2. I do have client side validation using HTML in some places. I don't view going to the server on submission as a negative position.
3. This could be changed if you prefer to have more inline errors! It's not something I'm planning to do here but wouldn't be much more work 😄
4. Same here, good idea but not something I'm planning on doing here. You can look at the state returned from useActionState and use that with a toast library from shadcn/ui, like Sonner.