HTML controls

[kennycharles]

I'm struggling with Blitz at the moment because I'm not sure how to work with all the html controls I need to build an application.
Normally I would use MUI but I find it too complicated to create wrappers for the MUI controls.

Can you guys recommend an easier approach for me such that I can create all the html controls I like and get the Zod validation working too?

[beerose]

So MUI is a component library that gives you a set of components to use, and there are libraries like react-final-form, react-hook-form, or formik (you can choose when setting up a Blitz project) that provide form state management, and tools to work with forms. You can set initial values, validate easily (zod validation is passed in validate prop), and do much more with these libraries. However, it's not mandatory to use them. The tradeoff is that you'd need to handle it all by yourself (state, validation, etc). That's why the most common way is to wrap you custom inputs in react-final-form (or there lib) utilities, so you can take full advantage of it.

You might be interested in this library: https://github.com/lookfirst/mui-rff — it provides mui bindings for react-final-form.

[kennycharles]

Thanks for the suggestion, I'll give it a try. I'd also like to explore other options. Is there a very simple approach to my problem that doesn't use a heavy framework like MUI? What do the expert Blitz developers like to use? Just a few other options would be great. Thanks!

[beerose]

The simplest (and most commont) approach is to use native HTML elements (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input). Our LabeledTextField component uses a HTML input element. And you can create more inputs in a similar way — radio buttons, checkboxes, etc. You can also use Field from react-final-form (instead of useField) that gives you an easier way to create form components. Here's a nice demo: http://jinno.io/app/12/?source=react-final-form.

[kennycharles]

Excellent! Thank you so much Aleksandra, I appreciate your help and patience with me. You know the saying, "You can't teach an old dog new tricks". But let's try.