Core Components

[kennycharles]

I'm new to React/Next/Blitz so please forgive me for the naive question.

In the core components folder there's a LabeledTextField which can be used for text, password, email, and number.

What about:
radio buttons
checkboxes
datepicker
select
etc.

Do I have to create them myself? What am I missing?

Thanks
Ken

[beerose]

Hey! Glad to have you checking out Blitz!

So Blitz is meant to help you build full-stack apps easily — it has some stuff like database, auth, linter, test runner set up out of the box, or it can generate some code for you, lets you install recipes, etc. You can read more about Blitz features in the docs: https://blitzjs.com/docs/get-started.
However, Blitz doesn't export UI components. There is LabeledTextField or Form in the new app template to have sample login/signup forms provided out of the box, but apart from that, we don't focus on the UI elements.
For ready-to-use components, you can use some UI libraries, e.g. https://tailwindui.com/, https://mui.com/, and so on (there are plenty of choices!).

We also have a few recipes in Blitz, that let you install them easily by running, for example, blitz install tailwind in your Blitz project. Here's the full list of recipes: https://github.com/blitz-js/blitz/tree/canary/recipes.

[kennycharles]

Thanks for your help. As a newbie, it's difficult for me to know what I need to override and what I have to use. I've already installed MUI so the next step is try and build a form with it. Love Blitz and would like to contribute at some point. First I need to know what I'm doing. Cheers,
Ken

[beerose]

Cool! Feel free to ask questions, we'll be happy to help :)

[kennycharles]

I've created a simple model:

model Todo {
id Int @id @default(autoincrement())
name String
}

Ran blitz g all

and changed the form to use MUI TextField instead of LabeledTextField.
zod throws an error name is required.
What did I do wrong?

[beerose]

I don't have enough context to say for sure. Probably what happened is that you have to make the new component, TextField, work properly with the Form parent. I replied in your other issue about that.