 Presenting the Looper, a powerhouse machine for building all sorts of awesome stuff. Like this. And this. And this. It might not look like much unstyled, but it packs a punch, a functionality that's mega useful. The Looper features automatically unselecting the previous item, ensuring that only one can be selected at a time, and I call it unconcealed because all the options are shown to the user without an action to reveal the full set, you know, like a select element where you have to click it to see all the options as opposed to this radio group, which just lays them all out there for you. It's also super accessible. It supports mouse, keyboard, screen readers, and it's been a solid little machine for many years. It's a perfect mini web machine to use when there's like less than eight items or so to pick from. But if there's more than that, there's certainly use cases where you might want to reach for a select or something that does conceal the additional options, you know, to prevent choice overload. It's super fun and stuff, but it's also really fun when the browser manages the state for you. And so in the case of this, the browser manages the selection state and also offers a few ways to style or access the data from it. From CSS, we have the checked pseudo class. And from JavaScript, we can query the checked pseudo class like via query selector, or you can use Looper inside of a form and access the selected value from the form data API. Lots of choices, classic web. Now, if it wasn't obvious, or maybe you're wondering why I called it the Looper, it's because this supports something called roving focus or roving index. That's like a fancy term for saying it's a meaningful focus trap that is cyclical upon interaction. That cyclical aspect is why I called it the Looper, but roving UX has even more features. Check this out. If I had to tab through 100 videos in that first section just to get to the second section, that would be absolutely terrible. Well, the way a radio group works and the way that roving UX works is you focus into that area and then you can move with the arrow keys and if you hit tab again, you jump to the next section. So you're not trapped inside of there. You're actually you go in, you dip around with the arrow keys and then you can jump out and go to somewhere else. That's very critical in the interaction pattern. Something to note when you go and copy and paste this machine, which I hope you do, I am using the implicit label input relation here. This is where the input element is inside of the label. This means I don't have to use the for attribute or give the input an ID, but there's certainly use cases where your label might be somewhere else and your input is somewhere else at which point you can connect them together. And by the way, always use a label. You can connect them together by giving the input an ID and the label element for attribute that points to that ID. Now when you click the label, it selects that particular radio. It's a really cool way to kind of separate your concerns and also build really engaging experiences. And a little bonus tip, the field set element, which you might remember from GUI challenges, hopefully you saw some of those episodes. It can make observing value changes super easy. So normally you might look at each particular input and wait for them to change and then try to manage state that way. It's really messy. Or you can use a field set element, put all these inside of it and watch for changes on the field set element. Kind of rolling up all the changes of the inputs into one single place for you to observe and I really like that pattern. Plus then you get to use the legend element and then you get to be a legend or use a legend. I don't know. Anyway, it's the legend element. Who doesn't want to use that one? It just sounds rad. So earlier in this episode, I teased some really cool use cases of the looper. And now let's go into those a little bit deeper and try to look like a pro. This one is kind of silly. It's very literal. So here I tab into the radio group and then where's the start and where's the end? I don't know because someone put this layout of this radio group into a circle and now it goes around forever. I can use the up arrow, the down arrow, the left arrow, the right arrow. It's just kind of silly. It was also a fun use of trigonomic CSS, you know, make a circle layout. That's fun. This one, you can see the label and the input. So there's a pretty strong hint right there that this is backed by the looper. And of course, if I tab in, I get cyclical interaction here. So I can kind of loop through these forever. And thanks to the view transitions API, I can morph between the selection. So basically this is a grid layout, the current one that's selected, the one that's checked. Remember we saw that CSS hook. It's the larger one in the layout, but if the checked state changes, a different one has become the larger one. And I just say, hey, grid, make this one big and, hey, view transitions. I'm going from an old state to a new state. Would you please morph those elements between the states? And it does it all. And the final inspirational demo for what you can do with the looper is this single selection plant chooser. And it does this by, well, here, let's see. I'm in a radio group, look, there's only one checked at a time. And if I get to the end and I go back to the beginning, there is your strong clue. We are trapped inside of some roving UX that's freely delivered by a radio group. And the way that this one works is it takes that checked pseudo class, that CSS hook we were talking about earlier. And it promotes it by giving it grid template comms. It's going to have more FR units assigned to it than the ones next to it. So the one in the middle here is getting about five. The one on each side is getting about two and a half. And the ones at the end are getting one. And then as I move through, I use the has selector to look at which one is selected, and I select the adjacent ones next to it, as well as the one here and give them a different size and FR units. And then you can transition grid template columns. So you combine transition and grid template columns, the looper element, and the easing function for getting springy animations. And you've got yourself this super cool rad demo. If you liked this episode, go ahead and tell us in the comments. I'm curious, should I keep making more mini web machines? I've got a long list of things that I think make really good little reusable machines, but I need to hear from you to let me know. So give it a like, give a subscribe, give me a comment. And I hope I can send you some more mini web machines. See you later, y'all.