Alain Afflelou Design System

Checkboxes 

<div x-data="{ expanded: false }" class="border-b border-neutral-200 md:pb-3 text-neutral-800 text-neutral-800">
    <h2 class="font-medium py-4 md:pt-6 md:pb-3 text-base md:text-xl">
        <button type="button" @click="expanded = !expanded " class="flex justify-between items-center w-full ">
            <span class="flex flex-wrap gap-3">
                Accordion title
            </span>

            <span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300">
                <svg class=" shrink-0" width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
                </svg>
            </span>
        </button>
    </h2>
    <div x-cloak x-show="expanded" x-collapse class=" ">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 pb-4 md:pb-3">
            <label class="selection-control-label selection-control-size-md">
                <input :checked="$store.filter.getFilter('checkboxes', 'Mixte')" @click="$store.filter.toggleFilter('checkboxes', 'Mixte')" type="checkbox">
                <span>Mixte (50)</span>
            </label>
            <label class="selection-control-label selection-control-size-md">
                <input :checked="$store.filter.getFilter('checkboxes', 'Homme')" @click="$store.filter.toggleFilter('checkboxes', 'Homme')" type="checkbox">
                <span>Homme (65)</span>
            </label>
            <label class="selection-control-label selection-control-size-md">
                <input :checked="$store.filter.getFilter('checkboxes', 'Femme')" @click="$store.filter.toggleFilter('checkboxes', 'Femme')" type="checkbox">
                <span>Femme (62)</span>
            </label>
            <label class="selection-control-label selection-control-size-md">
                <input :checked="$store.filter.getFilter('checkboxes', 'Enfant')" @click="$store.filter.toggleFilter('checkboxes', 'Enfant')" type="checkbox">
                <span>Enfant (15)</span>
            </label>
        </div>

    </div>
</div>
 
{% set accordionContent %}
    <div class="grid grid-cols-1 {{ checkboxes|length > 1 ? 'md:grid-cols-2' }} gap-4 md:gap-6 pb-4 md:pb-3">
        {% if checkboxes is defined %}
            {% for checkbox in checkboxes %}
                <label class="selection-control-label selection-control-size-md">
                    <input
                            :checked="$store.filter.getFilter('{{ name }}', '{{ checkbox.label }}')"
                            @click="$store.filter.toggleFilter('{{ name }}', '{{ checkbox.label }}')" type="checkbox">
                    <span>{{ checkbox.label }} ({{ checkbox.count|default(0) }})</span>
                </label>
            {% endfor %}
        {% endif %}
    </div>
{% endset %}
{% render "@accordion--filter" with {title:title,content:accordionContent} %}
 
{
  "name": "checkboxes",
  "checkboxes": [
    {
      "label": "Mixte",
      "count": 50
    },
    {
      "label": "Homme",
      "count": 65
    },
    {
      "label": "Femme",
      "count": 62
    },
    {
      "label": "Enfant",
      "count": 15
    }
  ]
}

No notes defined.