I’m wondering what would determine whether a radio button would be presented individually in labels, or grouped into a list? Is there a best practice? Are they each good for different purposes?
In the FCC curriculum, we’re taught to group radio buttons in labels like this:
<label>
<input type="radio" name="indoor-outdoor">Indoor
</label>
In the example given for the 2nd Web Design Project, the radio buttons are grouped in a list:
<div class="rowTab">
<div class="labels">
<label for="userRating">* How likely is that you would recommend freeCodeCamp to a friend?</label>
</div>
<div class="rightTab">
<ul style="list-style: none;">
<li class="radio"><label>Definitely<input name="radio-buttons" value="1" type="radio" class="userRatings" ></label></li>
<li class="radio"><label>Maybe<input name="radio-buttons" value="2" type="radio" class="userRatings" ></label></li>
<li class="radio"><label>Not sure<input name="radio-buttons" value="3" type="radio" class="userRatings" ></label></li>
</ul>
</div>
</div>
Any insight is appreciated, thank you!