00:00 All right, let's get to it. So for the account type We want to have this default to student and so on select we're gonna say default value is student and Now you'll notice boom defaulting to student awesome

00:16 And I'm gonna format that the way that I like it formatted just because I honestly I don't actually care that much about it But I kind of do Okay, so we cannot or it doesn't make sense to default the username and password you can default those But we're not going to for this form. It's an onboarding form

00:34 You'd like it's gonna be a different username and password every time right? So then we've got our age Maybe most people who are submitting this form are is going to submit 18 or like there's filling this form out at for a student who's 18 years old. It just graduated or something

00:50 And yeah, we also have this min and max so nobody over the age of 200 is allowed to onboard here but we will add a default value of 18 and Again, this will be coerced down into a string So whether you do this number of 18 or the string of 18, it is the same

01:11 Because it just gets two stringed. Anyway, I'm gonna set it to a string. But yeah, you do you We cannot have a default file that or yeah default file or photo Because there are security implications with that. So we're not going to default that

01:28 We can do a default color though. And maybe this is an onboarding form for a particular school like BYU. This is their school color So we'll have the default value Be that and what's cool about this is now this solves the problem of the reset error that we were seeing earlier Whenever the form is reset it's going to reset to these default values

01:47 And so we're no longer going to have the problem with it reset trying to reset a color To an empty string because now we've got a default value set for that So it'll reset back to this default value, which is nice Okay, great. And then we want to default to public So this is where things get a little bit tricky because you actually now have two inputs

02:08 So where do you put the default value and actually what would you put as a default value if we do it here default? Value do you do like public like that's kind of weird, right? Because that's the value I sent the value already. So no, you don't do default value for the inputs instead you say default checked and

02:30 You can pass it like this that is going to evaluate as the same as if you'd said equals true this is a Corollary to the attribute that you would set here As checked this is what the HTML attribute would be if we were doing this as HTML

02:49 but yet we're going to do default checked is true on public for our visibility and now public is set and Then here the waiver sign. We're going to say default checked on this one as well and Again, these two are equivalent. You can leave off the equals true and that will evaluate to just be true

03:10 You can take a look at the compiled version of this if you're at all curious what that ends up looking like If you go to the bevel repel online Pretty cool. Okay, and then finally the default value for the start date. This one's going to be a little bit tricky

03:27 Because you need to match the format that it's submitted as so if we set this to here we say submit Then here's the format that we need to have for the default start date. So here I'm going to just say default value equals Our AI assistant is going to help us a little bit too much. So we're gonna we're gonna just skip that. Here we go

03:48 No, no, no, not that this there we go And so now we're getting the default value set to today and I could change it to be in the future If if you're watching this on this date in the future, go ahead and hit me up on the socials and say hey I was watching it on that day. How cool? But

04:09 Yeah, so you could set it this way, but we want it to be whatever the current day is, right? And so now we're going to need to do some interpolation and do some dynamic stuff and we're doing this using it creating a new Date, so if we say a new date and then to ISO string to get that format We just need the date portion. We don't care about the time portion

04:28 So we're gonna slice off the first 10 characters and that will get us the format of the date that we're looking for So we save that and boom that is today again dating my videos but yeah, there we go, so That gets us with a bunch of default values handling the

04:48 Dynamism of react by not using the value prop for anything other than the stuff that actually does need to be static So we've got our value on our options. We have our value on our radio inputs as well Where is that? There we go a value on the radio input because those things aren't dynamic. They're not going to change but the Whether it's checked

05:09 What the actual value of this input? Yeah, these things aren't dynamic And so that's why we are and and they're changeable by the user And so that's why we are using the default variant for the prop for those so a little bit of react magic there but just the right in amount to make it so we can make really cool dynamic and

05:28 Composable and declarative applications. So there you go default values in your forms