#Which are the best form libraries to use with XState and React and Next.js?

1 messages · Page 1 of 1 (latest)

opal raven
#

From your experience which form libraries have been a pleasure to work with XState?

Has anyone ever adventure themselves in building a multi-step form with a library like react-jsonschema-form ?

Thanks in advance!

little oar
#

I've played around with rjsf - it works well!

#

You can use any form library; the main idea is that the form libraries themselves will contain the state for the form, and you can communicate that state to XState for further orchestration (e.g. when you submit that form)

mental harness
#

React-hook-form

We built a multistep form taking inspiration from the xstate-catalogue example.
Works like a charm!

opal raven
#

Thanks for your replies! I also mean from an api point of view, aren't there some form libraries that are just a bit easier and nicer to integrate with?
For example if you have an error state in the machine which depends on the validation of the form.

mental harness
#

In RHF you have a few different options for validation:

For client-side validation:

  • manually on each field with common html validations
  • with a schema (eg. using zod or yup)

For server validations:

useForm - setError

Performant, flexible and extensible forms with easy-to-use validation.

opal raven
#

react-hook-form does look good and I have used it in the past 😄

mental harness
#

All logic is in the hook, so you'll have to build your own form (or abstract away things in components) but it's very flexible and incredibly performant (since it uses uncontrolled registration)

opal raven
#

Sounds good as I will be building the forms, it does sound like a pretty good choice.

thorny tartan
#

I cant recommend RHF enough, not using with with xState but i moved from formik and haven't looked back.