Stylizing LWC radio list?

Question

So right now I'm trying to build this radio list for the regions in LWC, the functionality works fine in that when you click on the regions it selects all the states below for that region.

https://i.stack.imgur.com/y2MM8.png

However, I want to stylize it so that it looks more proper. I'm a little confused how to do this using these components that LWC provides. Here's a mockup of what the regions should look like.

https://i.stack.imgur.com/A26PH.png

Here's what the HTML for it looks like.

https://i.stack.imgur.com/1vWcy.png

Answer 1

You can probably achieve this by using the grid system : https://www.lightningdesignsystem.com/utilities/grid/

Answer 2

We can achieve the same style by following a couple of steps:

1. Pass class to each lightning inputs to scope the styling.

2. Style radio controls having the passed class name.

3. save the file as .css and store in static resources.

4. Load style sheet in component by making use of loadStyle method from platformResourceLoader module.