Vebego Component Library

Radiobutton Group 

<!-- Default -->
<div class="mol-radiobutton-group " data-radiobutton-group>
    <div class="atm-heading h3">Selecteer een optie</div>

    <div class="radiobutton-group-wrapper">
        <div class="dropdown-toggle">
            <span class="dropdown-label">Selecteer een categorie</span>
            <span class="dropdown-icon">
                <i class="far fa-chevron-down"></i>
            </span>
        </div>
        <div class="dropdown-options">
            <div class="atm-form-radiobutton ">
                <input type="radio" class="form-radiobutton" id="radio-option-1" name="radio-group" value="option1" checked>
                <label class="atm-form-label form-label " for="radio-option-1">Optie 1</label>

            </div>

            <div class="atm-form-radiobutton ">
                <input type="radio" class="form-radiobutton" id="radio-option-2" name="radio-group" value="option2">
                <label class="atm-form-label form-label " for="radio-option-2">Optie 2</label>

            </div>

            <div class="atm-form-radiobutton ">
                <input type="radio" class="form-radiobutton" id="radio-option-3" name="radio-group" value="option3">
                <label class="atm-form-label form-label " for="radio-option-3">Optie 3</label>

            </div>

        </div>
    </div>
</div>


<!-- Vacancy Submenu Style -->
<div class="mol-radiobutton-group vacancy-style" data-radiobutton-group>
    <div class="atm-heading h3">Selecteer een categorie</div>

    <div class="radiobutton-group-wrapper">
        <div class="dropdown-toggle">
            <span class="dropdown-label">Selecteer een categorie</span>
            <span class="dropdown-icon">
                <i class="far fa-chevron-down"></i>
            </span>
        </div>
        <div class="dropdown-options">
            <div class="atm-form-radiobutton vacancy-style">
                <input type="radio" class="form-radiobutton" id="vacancy-radio-1" name="vacancy-radio-group" value="aanmelden" checked>
                <label class="atm-form-label form-label " for="vacancy-radio-1">Meld je aan</label>

            </div>

            <div class="atm-form-radiobutton vacancy-style">
                <input type="radio" class="form-radiobutton" id="vacancy-radio-2" name="vacancy-radio-group" value="planning">
                <label class="atm-form-label form-label " for="vacancy-radio-2">Planning</label>

            </div>

            <div class="atm-form-radiobutton vacancy-style">
                <input type="radio" class="form-radiobutton" id="vacancy-radio-3" name="vacancy-radio-group" value="sri-lanka">
                <label class="atm-form-label form-label " for="vacancy-radio-3">Sri Lanka</label>

            </div>

            <div class="atm-form-radiobutton vacancy-style">
                <input type="radio" class="form-radiobutton" id="vacancy-radio-4" name="vacancy-radio-group" value="marokko">
                <label class="atm-form-label form-label " for="vacancy-radio-4">Marokko</label>

            </div>

            <div class="atm-form-radiobutton vacancy-style">
                <input type="radio" class="form-radiobutton" id="vacancy-radio-5" name="vacancy-radio-group" value="ghana">
                <label class="atm-form-label form-label " for="vacancy-radio-5">Ghana</label>

            </div>

        </div>
    </div>
</div>


<div class="mol-radiobutton-group {{modifier}}" data-radiobutton-group>
    {{#if heading}}
        {{render "@heading" heading}}
    {{/if}}
    <div class="radiobutton-group-wrapper">
        <div class="dropdown-toggle">
            <span class="dropdown-label">Selecteer een categorie</span>
            <span class="dropdown-icon">
                <i class="far fa-chevron-down"></i>
            </span>
        </div>
        <div class="dropdown-options">
            {{#each items}}
                {{render '@radiobutton' this merge=true}}
            {{/each}}
        </div>
    </div>
</div>
 
/* Default */
{
  "modifier": "",
  "heading": {
    "text": "Selecteer een optie",
    "tag": "div",
    "modifier": "h3"
  },
  "items": [
    {
      "modifier": "",
      "id": "radio-option-1",
      "name": "radio-group",
      "value": "option1",
      "checked": true,
      "label": {
        "text": "Optie 1",
        "for": "radio-option-1"
      }
    },
    {
      "modifier": "",
      "id": "radio-option-2",
      "name": "radio-group",
      "value": "option2",
      "checked": false,
      "label": {
        "text": "Optie 2",
        "for": "radio-option-2"
      }
    },
    {
      "modifier": "",
      "id": "radio-option-3",
      "name": "radio-group",
      "value": "option3",
      "checked": false,
      "label": {
        "text": "Optie 3",
        "for": "radio-option-3"
      }
    }
  ]
}


/* Vacancy Submenu Style */
{
  "modifier": "vacancy-style",
  "heading": {
    "text": "Selecteer een categorie",
    "tag": "div",
    "modifier": "h3"
  },
  "items": [
    {
      "modifier": "vacancy-style",
      "id": "vacancy-radio-1",
      "name": "vacancy-radio-group",
      "value": "aanmelden",
      "checked": true,
      "label": {
        "text": "Meld je aan",
        "for": "vacancy-radio-1"
      }
    },
    {
      "modifier": "vacancy-style",
      "id": "vacancy-radio-2",
      "name": "vacancy-radio-group",
      "value": "planning",
      "checked": false,
      "label": {
        "text": "Planning",
        "for": "vacancy-radio-2"
      }
    },
    {
      "modifier": "vacancy-style",
      "id": "vacancy-radio-3",
      "name": "vacancy-radio-group",
      "value": "sri-lanka",
      "checked": false,
      "label": {
        "text": "Sri Lanka",
        "for": "vacancy-radio-3"
      }
    },
    {
      "modifier": "vacancy-style",
      "id": "vacancy-radio-4",
      "name": "vacancy-radio-group",
      "value": "marokko",
      "checked": false,
      "label": {
        "text": "Marokko",
        "for": "vacancy-radio-4"
      }
    },
    {
      "modifier": "vacancy-style",
      "id": "vacancy-radio-5",
      "name": "vacancy-radio-group",
      "value": "ghana",
      "checked": false,
      "label": {
        "text": "Ghana",
        "for": "vacancy-radio-5"
      }
    }
  ]
}
  • Content: 
    .mol-radiobutton-group {
    @apply w-full;

    .atm-heading {
        @apply mb-3 text-secondary-col-1;
    }

    .radiobutton-group-wrapper {
        @apply flex flex-col gap-2;
    }

    /* Vacancy style variant - horizontal layout like submenu */
    &.vacancy-style {
        @apply relative font-display;

        .atm-heading {
            @apply hidden;
        }

        /* Mobile: Hide entire radiobutton group, dropdown will be controlled by filter button */
        @media (max-width: 768px) {
            @apply hidden;
        }

        .atm-form-radiobutton {
            @apply m-0 gap-0 block;

            .form-radiobutton {
                @apply hidden;
            }

            .atm-form-label {
                @apply text-md font-normal block py-4 px-4 text-black cursor-pointer bg-white m-0;
                @apply border-none w-full rounded-none;
            }

            .form-radiobutton:checked + .atm-form-label {
                @apply bg-primary text-white;
            }

            .form-radiobutton:disabled + .atm-form-label {
                @apply opacity-50 cursor-not-allowed;
            }
        }
    }

    /* Desktop: Horizontal layout */
    @media (min-width: 769px) {
        .radiobutton-group-wrapper {
            @apply flex flex-row gap-0 bg-white rounded-t-xl overflow-hidden;
        }

        .dropdown-toggle {
            @apply hidden;
        }

        .dropdown-options {
            @apply flex flex-row gap-0 w-full overflow-x-auto;
        }

        .atm-form-radiobutton {
            @apply flex-shrink-0 m-0 gap-0 block;

            .form-radiobutton {
                @apply hidden;
            }

            .atm-form-label {
                @apply text-md font-normal block py-5 px-3 text-black cursor-pointer bg-white m-0;
                @apply hover:bg-primary hover:text-white transition-colors;
                @apply border-none w-full h-full rounded-none;
            }

            .form-radiobutton:checked + .atm-form-label {
                @apply bg-primary text-white;
            }

            .form-radiobutton:disabled + .atm-form-label {
                @apply opacity-50 cursor-not-allowed;
            }
        }
    }
}
  • URL: /components/raw/radiobutton-group/radiobutton-group.css
  • Filesystem Path: src\components\03-molecules\radiobutton-group\radiobutton-group.css
  • Size: 2.3 KB
  • Content: 
    /**
 * Radiobutton Group - Responsive dropdown functionality
 */

document.addEventListener('DOMContentLoaded', () => {
    const radiobuttonGroups = document.querySelectorAll('[data-radiobutton-group].vacancy-style');

    radiobuttonGroups.forEach(group => {
        const toggle = group.querySelector('.dropdown-toggle');
        const dropdownLabel = group.querySelector('.dropdown-label');
        const radiobuttons = group.querySelectorAll('input[type="radio"]');

        if (!toggle || !dropdownLabel) return;

        // Update dropdown label with selected option
        const updateLabel = () => {
            const checked = group.querySelector('input[type="radio"]:checked');
            if (checked) {
                // Find the label element (could be .atm-form-label or label tag)
                const labelElement = checked.closest('.atm-form-radiobutton')?.querySelector('.atm-form-label, label');
                if (labelElement) {
                    dropdownLabel.textContent = labelElement.textContent.trim();
                }
            } else {
                // Set default text if nothing is selected
                dropdownLabel.textContent = 'Selecteer een categorie';
            }
        };

        // Toggle dropdown
        toggle.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            
            // Close other open dropdowns
            document.querySelectorAll('[data-radiobutton-group].vacancy-style.is-open').forEach(otherGroup => {
                if (otherGroup !== group) {
                    otherGroup.classList.remove('is-open');
                }
            });
            
            group.classList.toggle('is-open');
        });

        // Close dropdown when clicking outside
        document.addEventListener('click', (e) => {
            if (!group.contains(e.target)) {
                group.classList.remove('is-open');
            }
        });

        // Handle radio button selection
        radiobuttons.forEach(radio => {
            radio.addEventListener('change', () => {
                updateLabel();
                // Close dropdown on mobile after selection
                if (window.innerWidth <= 768) {
                    setTimeout(() => {
                        group.classList.remove('is-open');
                    }, 150);
                }
            });
        });

        // Initialize label with current selection
        updateLabel();
    });
});
  • URL: /components/raw/radiobutton-group/radiobutton-group.js
  • Filesystem Path: src\components\03-molecules\radiobutton-group\radiobutton-group.js
  • Size: 2.6 KB

No notes defined.