the example above. So let's grab this. We have a few components, RadioGroup, RadioGroupLabel, and RadioGroupOption. Let's grab that, let's paste it right here, let me just re-indent, let's make sure to grab our imports. So we need to import these three components, let's put that down here, let's paste that in, and let's add it to our components key as well. And we need one more piece of state here, we need to keep track of whatever the user checks, and in this case it's a plan. You can see a v-model plan here, so let's add that piece of state.

checks, and in this case it's a plan. You can see a v-model plan here, so let's add that piece of state. You can see it here, but we're going to do it the view two way, say plan, and default is an empty string. So that's fine. Okay, let's see if this renders anything, let me save this. And we do get something here, and we can select them, so it is working, but we'd like to style it like the example. So let's go back to our radio group in the markup, and I'm going to add some classes on the radio group itself.

So let's go back to our radio group in the markup, and I'm going to add some classes on the radio group itself. Let's say max-width of medium is fine, and then let's give it some margin. For the label, let's make it bold, so I'll say font-bold. And for each option here, as you can see it is repeated here, but if you want to do it the more declarative way, you can set up an array, so in this case an array of plans, and then you can loop over them. But for now we'll just hard code it. So I want some space in between these options, so I'm going to wrap them in a div. So let's grab these, let's wrap them in a div with a space-y for utility, so there's

So I want some space in between these options, so I'm going to wrap them in a div. So let's grab these, let's wrap them in a div with a space-y for utility, so there's space vertically between them, and let's give it a margin-top as well. Okay, cool. And let me style the first one first, and then we'll copy it over to the other ones. So we'll add a class on this radioGroupOption, let's make it white, let's make it rounded-empty, and let's add a shadow on it. And then for the actual element itself, actually let's just save that. Okay, so now you start to see the style here. So let me go back to the example, so you can see that there's this checked icon here,

Okay, so now you start to see the style here. So let me go back to the example, so you can see that there's this checked icon here, so we want this to be flex, and this will be the first flex item, and then the checkmark will be the second flex item, so let's do that. So I'm going to change this span to a div, actually let me just reformat this so it's on its own line, and let's add some classes here, like I said, it's going to be flex, so flex, items, center, justify, between, okay, and let's give it some padding here, px-4 and py-4 is what I have, and when it's checked, I'm going to change it to the blue we've been using, and say text-white, okay. See how that looks?

but if you want something to select by default, you can just add a default value here, and now startup is the default one that's checked, cool, now like I've been saying throughout the series, you have complete control over the markup and the styling here, so let's go ahead and make another variation of this, just to show you how easy it is, so I'm going to make another variable here, let's say gameSelection, and we'll make a video game selection here, so gameSelection, let's say newGame as the default, and let's go ahead and go back to our radio group, and let's duplicate this, actually let's grab this whole thing, and we'll make a new one down here, but we'll change it up, okay, so that should be duplicated, we have this new one here, and let's change the h2 for this, let's say alternateRadioGroup, and for the label let's say videoGameMenu, okay, and I'm going to use an 8-bit

we have this new one here, and let's change the h2 for this, let's say alternate radio group, and for the label let's say video game menu, okay, and I'm going to use an 8-bit font here, so let me add that class on the main radio group, so right here, let's call it font-retro, and we'll add that font stack in our tailwind.config.js, so I'm going to extend the fontFamily, and add a new font called press-start-2p, which you can see here, and it's a, where is it, 8-bit font, like you see in old school video games, so let's go ahead and grab this font, so select this style, I'm just going to import it in the CSS, so let's grab this, and let's go to our CSS here, I called it index.css, and let's just import the font up here, okay, and hopefully I did that right, so it did compile, hopefully our font is showing now, and it looks like it is, cool, so let's go back into our app and