🚧 Under Construction

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

Checkbox Group /w Columns

HTML Markup

<menu class="hoo-checkbox-group" role="group" tabindex="0" style="--cols-desk: 2; --cols-mobile: 1">
    <li tabindex="-1">
        <input type="checkbox" name="chbg1" id="chbg1" value="" class="hoo-checkbox" >
        <label for="chbg1">Apple</label>
    </li>
    <li tabindex="-1">
        <input type="checkbox" name="chbg2" id="chbg2" value="" class="hoo-checkbox" >
        <label for="chbg2">Avocado</label>
    </li>
    <li tabindex="-1">
        <input type="checkbox" name="chbg3" id="chbg3" value="" class="hoo-checkbox" >
        <label for="chbg3">Banana</label>
    </li>
    <li tabindex="-1">
        <input type="checkbox" name="chbg4" id="chbg4" value="" class="hoo-checkbox" >
        <label for="chbg4">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.