I Never Want To Create Forms Any Other Way

[@Diego_Cabrera]

Amazing video thank you so much. I was procrastinating building a multi-step form bc I thought it was too much hassle, but you have saved me 🙌

[@AtraxaApologist]

I'm completely new to pretty much all of this, but I love how you effectively explain every step so I can actually learn instead of just "know". Great job! c:

[@TheGrandChieftain]

This video is exactly what I was looking for. It deserves so much more recognition. Thank you!

[@douglascolin3562]

Thanks for the great video Elliot. I like to follow along and do something before diving too deep into docs, and this was well paced & easy to follow. Love how you concisely explain the meaning of the various methods/variables and how they relate to each other, that's unfortunately uncommon. Keep up the good work.

[@twisterrjl]

You explained it really well. I see you spent time understanding every concept. Good job and thank you!

[@GyaneshSharmaATX]

This is exactly what I was looking for. Great tutorial for building forms using React.

[@elliottchong]

Glad it was helpful!

[@haikalt.9279]

Amazing video, the best practice you implemented for toggle theme button is new to me. Cheers.

[@spiderbear3995]

Very thorough explanations my guy... thank you very much!

[@elliottchong]

Thank you! I'm glad you enjoyed the tutorial :)

[@staticwasabi]

Thanks for this, it's easy to understand and follow along. Your explanations were very clear!

[@kartheekakella2757]

Great Video Elliott!!! So clear and thorough in explanation... Thank you!

[@elliottchong]

Glad it was helpful!

[@dreamsachiever212]

this video is so underrated! kudos to you. very well explained. thank you

[@Tyheir]

Awesome video, I love the fast pace style. I hate when videos spend so much time messing with the editor and writing code.

[@elliottchong]

LMAOO thank you! I'm glad you enjoy the fast pace that I go out :)

[@yasserhy]

Thank you so much for this amazing video! I will be using this in my project :)

[@sandrogtz]

this video saved me so much debugging time i was using the standart Select version instead off the form Select vesrion thanks bro

[@mohaniya15]

This is an amazing video. I truly never want to make forms any other way.

[@elliottchong]

hahahah thank you brother

[@soon8098]

thats so cool, ill definitely be using this for my project!

[@elliottchong]

:)) Glad that you found this helpful!

[@JohnoScott]

Great video. The pace is perfect - not too slow and covering all the details. Can you do a video that uses the app router and RSC ?

[@elliottchong]

Thank you! kzbin.info/www/bejne/rHrchmekftOfqpI I just created a full stack application using the app router and RSC

[@Leofmoura87]

Thank you! Your teaching is awesome.

[@YuqingChan]

shadcn is just too good haha. i was building out my project today and i am just thinking man, we gone long ways

[@elliottchong]

broo for real tho haha… i’ve been trying to find the perfect ui frameworks for years and shadcn just fulfilled everything i ever wished for 🤭

[@BlazeShomida]

btw for the div you used to wrap the component that you put the min-h-screen on, you could just add grid and place content center and it would do the same, wouldnt need the div with the absolute position and translations

[@keshavakumar9828]

Wow this is actually so good. Got to know something new today😮 Thanks mate good video

[@elliottchong]

Glad you enjoyed!

[@BarisPalabiyik]

With tRPC, you can infer the input and output of the procedures and you can use the same types for both server and client side validation. Great marriage between the two.

[@lex.tosounidis]

Great video, thank you. But there is an issue, if any input is invalid then you have to click the "Next Step" button twice. The first time it triggers form validation but since the function is async, it does not wait and input state does not pass the check. Adding async to the button onClick event and await on the form.trigger() will solve the issue.

[@siddhartha-555]

Hi Lex, have you found any method to show if password and confirm the password do not match as a form error ?

[@deepakraj436]

Nice video. Got to learn something new.

[@elliottchong]

thank you!

[@mnchabel8402]

Such a beautiful tutorial

[@napalmqero2689]

Hello thank you for this tutorial. It was so usefull for me. Can you tell me please, what the extension you are using that suggests you commands to write this gray color hints that popup when you are starting to type something. I will be so gratefull if you tell me 🔥🔥🔥

[@cjstronger]

Was looking for a way to keep the state of inputs over re-render. Conditional rendering css is so much easier

[@yasserhy]

I think also for the Confirm Password, you can use Refine to do this check and show the error on the control instead of using the Toast.

[@indimerz]

when we go to second step, the fields already shows validation error messages, which is not good. how can we fix that??

[@ejirocontent]

Great video man, it's not yum but yup 24:46

[@siddhartha-555]

Hi Elliott, is there any way to show a form error instead of toast if the password and confirm the password do not match?

[@BailinCAI]

Amazing job, but i have a little question, how to define such a form by seperating several form components? Like personal informaiton, education, work experience, i want to do it in several modules.

[@teetanrobotics5363]

Amazing content. However, i think the tailwind and framer motion part could have been a lot more cleaner.

[@pedroleal3771]

How did u put the placeholder in select?

[@MiladJoodi]

Great ♥ Thanks so mush.

[@tnnz9920]

Have u try action for form? Its good?

[@matthewrossee]

How can we avoid triggering validation for the second step (passwords) when clicking next step with an invalid input on the first step? You can see that when you for example don't enter the email and then click next step, the passwords validation also fires. Besides that, great video!

[@aibattle-tj7yd]

onClick={async () => { const isValid = await form.trigger("name"); if (!isValid) return; setFormStep(1); }}

[@Shubham-yc6nz]

Hey is the app router good for building production applications for client

[@elliottchong]

hey, I just made a tutorial using the nextjs13's app router for a full stack production application kzbin.info/www/bejne/rHrchmekftOfqpI in my opinion there are still some integrations that needs to be added for the app router to be production ready. Right now there are still a lot of missing documentation and not much integrated libraries that supports the app router. Give it a few more months and I'm sure everything will be ironed out! :)

[@SiviweXakaza]

I wonder how would you do 3 steps?

[@elliottchong]

hmm good point, right now it's being hard coded to only 2 steps. If I were to design a 3 step form I would probably create a Higher Order Component to make it more dynamic...

[@mysoulfulechoes]

Hey Mr. CHONG, can you build a production grade authentication nextjs project capable of handling up to 15million active users?

[@coded_58]

Awesome bro

[@elliottchong]

Thank you bro :)

[@streafe4382]

Awesome dude!

[@andersonalmeydat7715]

Buen video bro

[@elliottchong]

Thank you!

[@yasserhy]

I think to center the form on the screen, it is better to just use className="h-screen flex items-center justify-center"

[@dearfrankg]

Check what happens when you tab through the fields

[@heruuu6114]

amazing!

[@sivajikondeti1969]

what is your font?

[@notfadeaway6617]

多謝！

[@SETV-r5x]

name font vscode , bro ?

[@jerryberry5532]

谢谢！

[@elliottchong]

LOL you're welcome jerry :)

[@TikeswarNaik-d7u]

What is the font family?

[@elliottchong]

I believe it's Inter, you can find it on google fonts

[@TikeswarNaik-d7u]

@@elliottchong Sorry, I was not clear. I wanted to know the font that you are using in your VSCode.

[@ellebelle8067]

@@TikeswarNaik-d7uit’s “Space Mono”

[@M1a2n3o43]

Shadcn is not working for me. I can install it fine but if i use/install more then 4 5 shadcn components at a single page my react app crashes. Idk its wierd 😅

[@jamesdenmark1396]

Try Mantine UI and then thank me later.

[@beneditonamburete1218]

Nice vídeo, but try to talk in -3x speed