Document how to arrange native radio buttons vertically

[lloydk]

All of the examples on the native radio buttons documentation page have a horizontal arrangement. It's not immediately obvious how to arrange them vertically so it would be nice to see at least one example of a vertical arrangement.

[claviska]

Great suggestion. In the meantime, since there's no Radio Group controller wrapping native radios, it's really up to you to style them however you want.

One option is to put them in a flex container with flex-direction: column:

<div style="display: flex; flex-direction: column; gap: .5rem;">
  <label><input type="radio" name="radio" value="1" checked> Option 1</label>
  <label><input type="radio" name="radio" value="2"> Option 2</label>
  <label><input type="radio" name="radio" value="3"> Option 3</label>
</div>

We'll get an example of this in the docs soon!

[claviska]

Update: you can also use wa-cluster (horizontal) and wa-stack (vertical) if you're using the CSS utilities.

<div class="wa-stack">
  <label><input type="radio" name="radio" value="1" checked> Option 1</label>
  <label><input type="radio" name="radio" value="2"> Option 2</label>
  <label><input type="radio" name="radio" value="3"> Option 3</label>
</div>

[lloydk]

Yeah, after about 15 minutes of playing around I remembered that there were layout utilities and used wa-stack but yesterday was the first time I tried using Web Awesome so it was a bit of a head scratcher at first.