🚧 Under Construction

This component documentation is currently being developed. Some features may be incomplete.

Radio Button Group /w Columns

HTML Markup

<menu class="hoo-radiobutton-group" role="radiogroup" tabindex="0" style="--cols-desk: 2; --cols-mobile: 1">
    <li tabindex="-1" role="radio">
        <input type="radio" name="radio-button-group" id="rbg1" value="apple" class="hoo-radio">
        <label for="rbg1" >Apple</label>
    </li>
    <li tabindex="-1" role="radio">
        <input type="radio" name="radio-button-group" id="rbg2" value="banana" class="hoo-radio">
        <label for="rbg2" >Avocado</label>
    </li>
    <li tabindex="-1" role="radio">
        <input type="radio" name="radio-button-group" id="rbg3" value="citrus" class="hoo-radio">
        <label for="rbg3" >Banana</label>
    </li>
    <li tabindex="-1" role="radio">
        <input type="radio" name="radio-button-group" id="rbg4" value="avocado" class="hoo-radio">
        <label for="rbg4" >Citrus</label>
    </li>
</menu>

Columns allow you to define a checkbox group across multiple columns. You are able to define different colum counts for mobile and desktop by using the following CSS variables.

–cols-desk
–cols-mobile

In this example the following CSS variables are defined:

<div class="hoo-checkbox-group" style="--cols-desk: 2; --cols-mobile: 1">

This example uses a two columns setup for desktop and mobile just one column.