Checkbox

Standaard checkbox

Geneste checkboxen

Met geneste checkboxen kun je eenvoudig een hele groep checkboxen aan of uit zetten. Hier is wel javascript voor benodigd.

<script>
            System.import('/node_modules/uno/dist/components/form/checkbox.js').then(function (module) {
                // Select the group-list
                var checkboxGroups = document.querySelectorAll('.example .input__group-list');
            
                for(var i = 0; i < checkboxGroups.length; i++) {
                    new module.CheckboxGroup(checkboxGroups.item(i));
                }
            });
        </script>

Geneste checkboxen - tabel

Geneste checkboxen kunnen ook in combinatie met een tabel gebruikt worden. De header rij bevat de hoofdcheckbox, die alle sub checkboxen in alle andere rijen triggered.
In de javascript geef je de tabel mee als hoofdcomponent. Zorg ervoor dat de tabel juist is opgemaakt met een thead en tbody.

<script>
                System.import('/node_modules/uno/dist/components/form/checkbox.js').then(function (module) {
                    // Select the table containing the checkboxes
                    var checkboxGroup = document.getElementById('table_nested');
                    new module.CheckboxGroup(checkboxGroup);
                });
            </script>

Horizontale checkboxen

Wanneer je slechts 2 checkboxen hebt, met een korte label, kun je deze om ruimte te besparen ook naast elkaar zetten.

Benodigde stylesheets

• /uno/components/form/form.css
• /uno/components/form/input.css
• /uno/components/tabs/tabs.css
• /uno/components/form/checkbox.css