00:00 So we're going to start with a field set right here. And inside that field set, we're going to have a legend. And that's going to be the label for the set of fields. And then we'll set that to visibility. And then we'll have our div for each one of these labels.

00:17 Now, I think in my solution, I don't actually include the div. This is going to come down to your styling preferences and all of that stuff. But the rest of what our AI assistant did here was reasonable. So we have our label that contains both the input and the label itself. That works out nicely.

00:35 It's going to, again, be however you end up deciding to style your UI. But the point is that when you click on the text public, it's properly associated to the input, which is the checkbox. And so by clicking on the text, it's actually going to make the selection, which is nice.

00:54 And here we have our name matches. So that's the important thing with the field set or a radio group, is that the name is the same. And that's how the browser knows to associate all of the different radio buttons with each other so that when you select one, it unselects the other or unchecks the other. We also have the type of radio. And then here we have our value.

01:14 So this is like the value that we have in our select options. And that determines what the value will be for this particular field named visibility. So if I pop open our DevTools, I have public selected, and we submit that, then we're going to see visibility is set to public.

01:34 If I change it to private, then we'll see that our visibility is set to private. And then, of course, if I have no selection and I submit that, then we don't have a visibility that shows up in here at all. The account type does have a value set to an empty string because we have this default, please select an option, which

01:53 has that empty string. So I suppose there's one difference between the radio and a select, is the select is always going to default to the first option, whereas a radio doesn't necessarily have to have a default. And it will just not appear if one of those is not checked. So there you go. That is how you add a radio group.

02:13 You need a field set so that you can have a legend that labels this whole collection of fields so that Assistive Technologies knows what to call these things. And users who are using your app will know, like, OK, so I see what my options are, but what am I choosing?

02:32 Does this option apply to? And so that is what the legend and field set are for. And then we have a label for each one of our individual fields. Those have the same name, the type of radio, and the value that this name should be assigned to when this is the one that's selected.

02:50 So there you go.