<label class="relative inline-flex items-center cursor-pointer">
    <input type="checkbox" aria-label="Attiva filtro {{filter}}" id="{{filter}}" name="{{filter}}" value="{{filter}}" data-filter-type="{{filter}}" @change="updateToggleFilter('{{filter}}', $event.target.value, $event.target.checked)" class="sr-only peer">
    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-dark"></div>
</label>