00:00 All right, let's get our waiver signed. We'll add a div right here. And we're going to have, yeah, the AI assistant wants us to do it this way just because it matches everything else. But we're not going to do it this way. Instead, we're going to have our label there. And we don't need that ID anymore.

00:18 And we can stick the input right in there. Now, our instructions were to put the label on the right side of the checkboxes. That's a pretty typical way to do that. So we're going to do that. And now, I want to see what happens when we submit this. So I'm going to say Kent C. Dodds.

00:36 And we're going to say, I like Twix. And this is not a Twix advertisement, by the way. I just realized I do like Twix. But they are not paying me to say that. And neither is Rick. OK, so we'll say today. And we'll submit this. And something that you'll notice right here that you might find kind of interesting

00:55 is the value of waiver. It is set to on when we submit that. That is interesting. So in form data, there is no true or false. In form data objects, if there is a checkbox, that is represented by the text on.

01:13 So you actually could technically make a text input where you say, type on if you want to have this be signed or whatever. Kind of silly, honestly. It's a little bit annoying. But that is the unique thing about that. But it's even more unique than that. If I just submit this again without having

01:31 checked that checkbox, let's take a look at that now. It doesn't appear at all. So I know that this should just be a true-false Boolean. That would make the most sense. But this actually resembles a little bit the way radio buttons work. Well, actually, no. There are some similarities between radio buttons and checkboxes. This isn't it.

01:51 But the interesting thing here is the waiver assigned to this checkbox will not appear if it's not checked. And if it is checked, it will appear. But it will appear as on. Something useful to know about the web platform.

02:10 So this is, yeah, again, this is not a React-specific thing. This is just the way that the web platform works, the way the form data object works. We have to deal with backward compatibility stuff. And so this is probably not going to change in the future. But it's useful information for you to know.

02:28 Luckily, in a real-world application, you're probably not going to be working directly with this stuff. And instead, you will have a library that manages some of this stuff for you, most likely. But yeah, it is good to understand how these primitives work. So there you go. That is how checkboxes work on the web

02:45 and how you render this in React.