Checkbox

Standaard checkbox

Hobbies:

Geneste checkboxen

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

Hobbies:
<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.

Voorbeeld geneste checkbox
2014 2015 2016
124 42 252
42 526 12
736 367 234
<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.

Ik wil het allemaal:

Benodigde stylesheets

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