<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>
<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>
{
"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"
}
}
]
}
.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;
}
}
}
}
/**
* 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();
});
});
No notes defined.