Alain Afflelou Design System

Checkboxes 

<h1 class="text-2xl uppercase font-bold text-neutral-900 pt-6">Element label and title</h1>

<h2 class="text-xl uppercase font-bold border-b text-neutral-900 pt-6 mb-3">Small</h2>
<div class="grid grid-cols-7 items-center gap-4">
    <h3 class="text-sm uppercase font-bold">Normal</h3>

    <!-- Small / checkbox -->
    <div class="selection-control selection-control-size-sm">
        <span class="selection-control-title">Label text</span>
        <label>
            <input type="checkbox">
            <span>checkbox text</span>
        </label>
    </div>

    <div class="selection-control selection-control-size-sm">
        <span class="selection-control-title">Label text</span>
        <label>
            <input checked type="checkbox">
            <span>checkbox text</span>
        </label>
    </div>

    <!-- Small / radio -->
    <div class="selection-control selection-control-size-sm">
        <span class="selection-control-title">Label text</span>
        <label>
            <input type="radio">
            <span>checkbox text</span>
        </label>
    </div>

    <div class="selection-control selection-control-size-sm">
        <span class="selection-control-title">Label text</span>
        <label>
            <input checked type="radio">
            <span>checkbox text</span>
        </label>
    </div>

    <!-- Small / toggle -->
    <div class="selection-control selection-control-size-sm selection-control-toggle">
        <span class="selection-control-title">Label text</span>
        <label>
            <input type="checkbox">
            <div class="toggle"></div>
            <span>checkbox text</span>
        </label>
    </div>

    <div class="selection-control selection-control-size-sm selection-control-toggle">
        <span class="selection-control-title">Label text</span>
        <label>
            <input checked type="checkbox">
            <div class="toggle"></div>
            <span>checkbox text</span>
        </label>
    </div>

    <h3 class="text-sm uppercase font-bold">Disabled</h3>

    <!-- Small / checkbox / disabled -->
    <div class="selection-control selection-control-size-sm">
        <span class="selection-control-title">Label text</span>
        <label>
            <input disabled type="checkbox">
            <span>checkbox text</span>
        </label>
    </div>

    <div class="selection-control selection-control-size-sm">
        <span class="selection-control-title">Label text</span>
        <label>
            <input checked disabled type="checkbox">
            <span>checkbox text</span>
        </label>
    </div>

    <!-- Small / radio -->
    <div class="selection-control selection-control-size-sm">
        <span class="selection-control-title">Label text</span>
        <label>
            <input disabled type="radio">
            <span>checkbox text</span>
        </label>
    </div>

    <div class="selection-control selection-control-size-sm">
        <span class="selection-control-title">Label text</span>
        <label>
            <input checked disabled type="radio">
            <span>checkbox text</span>
        </label>
    </div>

    <!-- Small / toggle -->
    <div class="selection-control selection-control-size-sm selection-control-toggle">
        <span class="selection-control-title">Label text</span>
        <label>
            <input disabled type="checkbox">
            <div class="toggle"></div>
            <span>checkbox text</span>
        </label>
    </div>

    <div class="selection-control selection-control-size-sm selection-control-toggle">
        <span class="selection-control-title">Label text</span>
        <label>
            <input checked disabled type="checkbox">
            <div class="toggle"></div>
            <span>checkbox text</span>
        </label>
    </div>
</div>

<h2 class="text-xl uppercase font-bold border-b text-neutral-900 pt-6 mb-3">Medium</h2>
<div class="grid grid-cols-7 items-center gap-4">
    <h3 class="text-sm uppercase font-bold">Normal</h3>

    <!-- Medium / checkbox -->
    <div class="selection-control selection-control-size-md">
        <span class="selection-control-title">Label text</span>
        <label>
            <input type="checkbox">
            <span>checkbox text</span>
        </label>
    </div>

    <div class="selection-control selection-control-size-md">
        <span class="selection-control-title">Label text</span>
        <label>
            <input checked type="checkbox">
            <span>checkbox text</span>
        </label>
    </div>

    <!-- Medium / radio -->
    <div class="selection-control selection-control-size-md">
        <span class="selection-control-title">Label text</span>
        <label>
            <input type="radio">
            <span>checkbox text</span>
        </label>
    </div>

    <div class="selection-control selection-control-size-md">
        <span class="selection-control-title">Label text</span>
        <label>
            <input checked type="radio">
            <span>checkbox text</span>
        </label>
    </div>

    <!-- Medium / toggle -->
    <div class="selection-control selection-control-size-md selection-control-toggle">
        <span class="selection-control-title">Label text</span>
        <label>
            <input type="checkbox">
            <div class="toggle"></div>
            <span>checkbox text</span>
        </label>
    </div>

    <div class="selection-control selection-control-size-md selection-control-toggle">
        <span class="selection-control-title">Label text</span>
        <label>
            <input checked type="checkbox">
            <div class="toggle"></div>
            <span>checkbox text</span>
        </label>
    </div>

    <h3 class="text-sm uppercase font-bold">Disabled</h3>

    <!-- Medium / checkbox / disabled -->
    <div class="selection-control selection-control-size-md">
        <span class="selection-control-title">Label text</span>
        <label>
            <input disabled type="checkbox">
            <span>checkbox text</span>
        </label>
    </div>

    <div class="selection-control selection-control-size-md">
        <span class="selection-control-title">Label text</span>
        <label>
            <input checked disabled type="checkbox">
            <span>checkbox text</span>
        </label>
    </div>

    <!-- Medium / radio -->
    <div class="selection-control selection-control-size-md">
        <span class="selection-control-title">Label text</span>
        <label>
            <input disabled type="radio">
            <span>checkbox text</span>
        </label>
    </div>

    <div class="selection-control selection-control-size-md">
        <span class="selection-control-title">Label text</span>
        <label>
            <input checked disabled type="radio">
            <span>checkbox text</span>
        </label>
    </div>

    <!-- Medium / toggle -->
    <div class="selection-control selection-control-size-md selection-control-toggle">
        <span class="selection-control-title">Label text</span>
        <label>
            <input disabled type="checkbox">
            <div class="toggle"></div>
            <span>checkbox text</span>
        </label>
    </div>

    <div class="selection-control selection-control-size-md selection-control-toggle">
        <span class="selection-control-title">Label text</span>
        <label>
            <input checked disabled type="checkbox">
            <div class="toggle"></div>
            <span>checkbox text</span>
        </label>
    </div>
</div>

<h2 class="text-xl uppercase font-bold border-b text-neutral-900 pt-6 mb-3">Large</h2>
<div class="grid grid-cols-7 items-center gap-4">
    <h3 class="text-sm uppercase font-bold">Normal</h3>

    <!-- Large / checkbox -->
    <div class="selection-control selection-control-size-lg">
        <span class="selection-control-title">Label text</span>
        <label>
            <input type="checkbox">
            <span>checkbox text</span>
        </label>
    </div>

    <div class="selection-control selection-control-size-lg">
        <span class="selection-control-title">Label text</span>
        <label>
            <input checked type="checkbox">
            <span>checkbox text</span>
        </label>
    </div>

    <!-- Large / radio -->
    <div class="selection-control selection-control-size-lg">
        <span class="selection-control-title">Label text</span>
        <label>
            <input type="radio">
            <span>checkbox text</span>
        </label>
    </div>

    <div class="selection-control selection-control-size-lg">
        <span class="selection-control-title">Label text</span>
        <label>
            <input checked type="radio">
            <span>checkbox text</span>
        </label>
    </div>

    <!-- Large / toggle -->
    <div class="selection-control selection-control-size-lg selection-control-toggle">
        <span class="selection-control-title">Label text</span>
        <label>
            <input type="checkbox">
            <div class="toggle"></div>
            <span>checkbox text</span>
        </label>
    </div>

    <div class="selection-control selection-control-size-lg selection-control-toggle">
        <span class="selection-control-title">Label text</span>
        <label>
            <input checked type="checkbox">
            <div class="toggle"></div>
            <span>checkbox text</span>
        </label>
    </div>

    <h3 class="text-sm uppercase font-bold">Disabled</h3>

    <!-- Large / checkbox / disabled -->
    <div class="selection-control selection-control-size-lg">
        <span class="selection-control-title">Label text</span>
        <label>
            <input disabled type="checkbox">
            <span>checkbox text</span>
        </label>
    </div>

    <div class="selection-control selection-control-size-lg">
        <span class="selection-control-title">Label text</span>
        <label>
            <input checked disabled type="checkbox">
            <span>checkbox text</span>
        </label>
    </div>

    <!-- Large / radio -->
    <div class="selection-control selection-control-size-lg">
        <span class="selection-control-title">Label text</span>
        <label>
            <input disabled type="radio">
            <span>checkbox text</span>
        </label>
    </div>

    <div class="selection-control selection-control-size-lg">
        <span class="selection-control-title">Label text</span>
        <label>
            <input checked disabled type="radio">
            <span>checkbox text</span>
        </label>
    </div>

    <!-- Large / toggle -->
    <div class="selection-control selection-control-size-lg selection-control-toggle">
        <span class="selection-control-title">Label text</span>
        <label>
            <input disabled type="checkbox">
            <div class="toggle"></div>
            <span>checkbox text</span>
        </label>
    </div>

    <div class="selection-control selection-control-size-lg selection-control-toggle">
        <span class="selection-control-title">Label text</span>
        <label>
            <input checked disabled type="checkbox">
            <div class="toggle"></div>
            <span>checkbox text</span>
        </label>
    </div>
</div>

<h1 class="text-2xl uppercase font-bold text-neutral-900 pt-6">Element label only</h1>

<h2 class="text-xl uppercase font-bold border-b text-neutral-900 pt-6 mb-3">Small</h2>
<div class="grid grid-cols-7 items-center gap-4">
    <h3 class="text-sm uppercase font-bold">Normal</h3>

    <!-- Label only / Small / checkbox -->
    <label class="selection-control-label selection-control-size-sm">
        <input type="checkbox">
        <span>checkbox text</span>
    </label>

    <label class="selection-control-label selection-control-size-sm">
        <input checked type="checkbox">
        <span>checkbox text</span>
    </label>

    <!-- Label only / Small / radio -->
    <label class="selection-control-label selection-control-size-sm">
        <input type="radio">
        <span>checkbox text</span>
    </label>

    <label class="selection-control-label selection-control-size-sm">
        <input checked type="radio">
        <span>checkbox text</span>
    </label>

    <!-- Label only / Small / toggle -->
    <label class="selection-control-label selection-control-size-sm selection-control-toggle">
        <input type="checkbox">
        <div class="toggle"></div>
        <span>checkbox text</span>
    </label>

    <label class="selection-control-label selection-control-size-sm selection-control-toggle">
        <input checked type="checkbox">
        <div class="toggle"></div>
        <span>checkbox text</span>
    </label>

    <h3 class="text-sm uppercase font-bold">Disabled</h3>

    <!-- Label only / Small / checkbox / disabled -->
    <label class="selection-control-label selection-control-size-sm">
        <input disabled type="checkbox">
        <span>checkbox text</span>
    </label>

    <label class="selection-control-label selection-control-size-sm">
        <input checked disabled type="checkbox">
        <span>checkbox text</span>
    </label>

    <!-- Label only / Small / radio -->
    <label class="selection-control-label selection-control-size-sm">
        <input disabled type="radio">
        <span>checkbox text</span>
    </label>

    <label class="selection-control-label selection-control-size-sm">
        <input checked disabled type="radio">
        <span>checkbox text</span>
    </label>

    <!-- Label only / Small / toggle -->
    <label class="selection-control-label selection-control-size-sm selection-control-toggle">
        <input disabled type="checkbox">
        <div class="toggle"></div>
        <span>checkbox text</span>
    </label>

    <label class="selection-control-label selection-control-size-sm selection-control-toggle">
        <input checked disabled type="checkbox">
        <div class="toggle"></div>
        <span>checkbox text</span>
    </label>
</div>
<h2 class="text-xl uppercase font-bold border-b text-neutral-900 pt-6 mb-3">Medium</h2>
<div class="grid grid-cols-7 items-center gap-4">
    <h3 class="text-sm uppercase font-bold">Normal</h3>

    <!-- Label only / Medium / checkbox -->
    <label class="selection-control-label selection-control-size-md">
        <input type="checkbox">
        <span>checkbox text</span>
    </label>

    <label class="selection-control-label selection-control-size-md">
        <input checked type="checkbox">
        <span>checkbox text</span>
    </label>

    <!-- Label only / Medium / radio -->
    <label class="selection-control-label selection-control-size-md">
        <input type="radio">
        <span>checkbox text</span>
    </label>

    <label class="selection-control-label selection-control-size-md">
        <input checked type="radio">
        <span>checkbox text</span>
    </label>

    <!-- Label only / Medium / toggle -->
    <label class="selection-control-label selection-control-size-md selection-control-toggle">
        <input type="checkbox">
        <div class="toggle"></div>
        <span>checkbox text</span>
    </label>

    <label class="selection-control-label selection-control-size-md selection-control-toggle">
        <input checked type="checkbox">
        <div class="toggle"></div>
        <span>checkbox text</span>
    </label>

    <h3 class="text-sm uppercase font-bold">Disabled</h3>

    <!-- Label only / Medium / checkbox / disabled -->
    <label class="selection-control-label selection-control-size-md">
        <input disabled type="checkbox">
        <span>checkbox text</span>
    </label>

    <label class="selection-control-label selection-control-size-md">
        <input checked disabled type="checkbox">
        <span>checkbox text</span>
    </label>

    <!-- Label only / Medium / radio -->
    <label class="selection-control-label selection-control-size-md">
        <input disabled type="radio">
        <span>checkbox text</span>
    </label>

    <label class="selection-control-label selection-control-size-md">
        <input checked disabled type="radio">
        <span>checkbox text</span>
    </label>

    <!-- Label only / Medium / toggle -->
    <label class="selection-control-label selection-control-size-md selection-control-toggle">
        <input disabled type="checkbox">
        <div class="toggle"></div>
        <span>checkbox text</span>
    </label>

    <label class="selection-control-label selection-control-size-md selection-control-toggle">
        <input checked disabled type="checkbox">
        <div class="toggle"></div>
        <span>checkbox text</span>
    </label>
</div>
<h2 class="text-xl uppercase font-bold border-b text-neutral-900 pt-6 mb-3">Large</h2>
<div class="grid grid-cols-7 items-center gap-4">
    <h3 class="text-sm uppercase font-bold">Normal</h3>

    <!-- Label only / Large / checkbox -->
    <label class="selection-control-label selection-control-size-lg">
        <input type="checkbox">
        <span>checkbox text</span>
    </label>

    <label class="selection-control-label selection-control-size-lg">
        <input checked type="checkbox">
        <span>checkbox text</span>
    </label>

    <!-- Label only / Large / radio -->
    <label class="selection-control-label selection-control-size-lg">
        <input type="radio">
        <span>checkbox text</span>
    </label>

    <label class="selection-control-label selection-control-size-lg">
        <input checked type="radio">
        <span>checkbox text</span>
    </label>

    <!-- Label only / Large / toggle -->
    <label class="selection-control-label selection-control-size-lg selection-control-toggle">
        <input type="checkbox">
        <div class="toggle"></div>
        <span>checkbox text</span>
    </label>

    <label class="selection-control-label selection-control-size-lg selection-control-toggle">
        <input checked type="checkbox">
        <div class="toggle"></div>
        <span>checkbox text</span>
    </label>

    <h3 class="text-sm uppercase font-bold">Disabled</h3>

    <!-- Label only / Large / checkbox / disabled -->
    <label class="selection-control-label selection-control-size-lg">
        <input disabled type="checkbox">
        <span>checkbox text</span>
    </label>

    <label class="selection-control-label selection-control-size-lg">
        <input checked disabled type="checkbox">
        <span>checkbox text</span>
    </label>

    <!-- Label only / Large / radio -->
    <label class="selection-control-label selection-control-size-lg">
        <input disabled type="radio">
        <span>checkbox text</span>
    </label>

    <label class="selection-control-label selection-control-size-lg">
        <input checked disabled type="radio">
        <span>checkbox text</span>
    </label>

    <!-- Label only / Large / toggle -->
    <label class="selection-control-label selection-control-size-lg selection-control-toggle">
        <input disabled type="checkbox">
        <div class="toggle"></div>
        <span>checkbox text</span>
    </label>

    <label class="selection-control-label selection-control-size-lg selection-control-toggle">
        <input checked disabled type="checkbox">
        <div class="toggle"></div>
        <span>checkbox text</span>
    </label>
</div>

<h1 class="text-2xl uppercase font-bold text-neutral-900 pt-6">Element only</h1>
<h2 class="text-xl uppercase font-bold border-b text-neutral-900 pt-6 mb-3">Small</h2>
<div class="grid grid-cols-7 items-center gap-4">
    <h3 class="text-sm uppercase font-bold">Normal</h3>

    <!-- Element only / Small / checkbox -->
    <input class=" selection-control-size-sm" type="checkbox">

    <input checked class=" selection-control-size-sm" type="checkbox">

    <!-- Element only / Small / radio -->
    <input class=" selection-control-size-sm" type="radio">

    <input checked class=" selection-control-size-sm" type="radio">

    <!-- Element only / Small / toggle -->
    <label class="selection-control-label selection-control-size-sm selection-control-toggle">
        <input type="checkbox">
        <div class="toggle"></div>
    </label>

    <label class="selection-control-label selection-control-size-sm selection-control-toggle">
        <input checked type="checkbox">
        <div class="toggle"></div>
    </label>

    <h3 class="text-sm uppercase font-bold">Disabled</h3>

    <!-- Element only / Small / checkbox / disabled -->
    <input disabled class=" selection-control-size-sm" type="checkbox">

    <input checked disabled class=" selection-control-size-sm" type="checkbox">

    <!-- Element only / Small / radio -->
    <input disabled class=" selection-control-size-sm" type="radio">

    <input checked disabled class=" selection-control-size-sm" type="radio">

    <!-- Element only / Small / toggle -->
    <label class="selection-control-label selection-control-size-sm selection-control-toggle">
        <input disabled type="checkbox">
        <div class="toggle"></div>
    </label>

    <label class="selection-control-label selection-control-size-sm selection-control-toggle">
        <input checked disabled type="checkbox">
        <div class="toggle"></div>
    </label>
</div>
<h2 class="text-xl uppercase font-bold border-b text-neutral-900 pt-6 mb-3">Medium</h2>
<div class="grid grid-cols-7 items-center gap-4">
    <h3 class="text-sm uppercase font-bold">Normal</h3>

    <!-- Element only / Medium / checkbox -->
    <input class=" selection-control-size-md" type="checkbox">

    <input checked class=" selection-control-size-md" type="checkbox">

    <!-- Element only / Medium / radio -->
    <input class=" selection-control-size-md" type="radio">

    <input checked class=" selection-control-size-md" type="radio">

    <!-- Element only / Medium / toggle -->
    <label class="selection-control-label selection-control-size-md selection-control-toggle">
        <input type="checkbox">
        <div class="toggle"></div>
    </label>

    <label class="selection-control-label selection-control-size-md selection-control-toggle">
        <input checked type="checkbox">
        <div class="toggle"></div>
    </label>

    <h3 class="text-sm uppercase font-bold">Disabled</h3>

    <!-- Element only / Medium / checkbox / disabled -->
    <input disabled class=" selection-control-size-md" type="checkbox">

    <input checked disabled class=" selection-control-size-md" type="checkbox">

    <!-- Element only / Medium / radio -->
    <input disabled class=" selection-control-size-md" type="radio">

    <input checked disabled class=" selection-control-size-md" type="radio">

    <!-- Element only / Medium / toggle -->
    <label class="selection-control-label selection-control-size-md selection-control-toggle">
        <input disabled type="checkbox">
        <div class="toggle"></div>
    </label>

    <label class="selection-control-label selection-control-size-md selection-control-toggle">
        <input checked disabled type="checkbox">
        <div class="toggle"></div>
    </label>
</div>
<h2 class="text-xl uppercase font-bold border-b text-neutral-900 pt-6 mb-3">Large</h2>
<div class="grid grid-cols-7 items-center gap-4">
    <h3 class="text-sm uppercase font-bold">Normal</h3>

    <!-- Element only / Large / checkbox -->
    <input class=" selection-control-size-lg" type="checkbox">

    <input checked class=" selection-control-size-lg" type="checkbox">

    <!-- Element only / Large / radio -->
    <input class=" selection-control-size-lg" type="radio">

    <input checked class=" selection-control-size-lg" type="radio">

    <!-- Element only / Large / toggle -->
    <label class="selection-control-label selection-control-size-lg selection-control-toggle">
        <input type="checkbox">
        <div class="toggle"></div>
    </label>

    <label class="selection-control-label selection-control-size-lg selection-control-toggle">
        <input checked type="checkbox">
        <div class="toggle"></div>
    </label>

    <h3 class="text-sm uppercase font-bold">Disabled</h3>

    <!-- Element only / Large / checkbox / disabled -->
    <input disabled class=" selection-control-size-lg" type="checkbox">

    <input checked disabled class=" selection-control-size-lg" type="checkbox">

    <!-- Element only / Large / radio -->
    <input disabled class=" selection-control-size-lg" type="radio">

    <input checked disabled class=" selection-control-size-lg" type="radio">

    <!-- Element only / Large / toggle -->
    <label class="selection-control-label selection-control-size-lg selection-control-toggle">
        <input disabled type="checkbox">
        <div class="toggle"></div>
    </label>

    <label class="selection-control-label selection-control-size-lg selection-control-toggle">
        <input checked disabled type="checkbox">
        <div class="toggle"></div>
    </label>
</div>
 
<h1 class="text-2xl uppercase font-bold text-neutral-900 pt-6">Element label and title</h1>

{% for size in sizes %}
    <h2 class="text-xl uppercase font-bold border-b text-neutral-900 pt-6 mb-3">{{ size.name }}</h2>
    <div class="grid grid-cols-7 items-center gap-4">
        <h3 class="text-sm uppercase font-bold">Normal</h3>

        <!-- {{ size.name }} / checkbox -->
        {% include "@template-checkbox" with {
            size: size.size,
            label: label,
            title: title
        } %}

        {% include "@template-checkbox" with {
            size: size.size,
            label: label,
            title: title,
            checked: true
        } %}

        <!-- {{ size.name }} / radio -->
        {% include "@template-checkbox" with {
            size: size.size,
            label: label,
            type: 'radio',
            title: title
        } %}

        {% include "@template-checkbox" with {
            size: size.size,
            label: label,
            type: 'radio',
            title: title,
            checked: true
        } %}

        <!-- {{ size.name }} / toggle -->
        {% include "@template-checkbox" with {
            size: size.size,
            label: label,
            type: 'toggle',
            title: title
        } %}

        {% include "@template-checkbox" with {
            size: size.size,
            label: label,
            type: 'toggle',
            title: title,
            checked: true
        } %}

        <h3 class="text-sm uppercase font-bold">Disabled</h3>

        <!-- {{ size.name }} / checkbox / disabled -->
        {% include "@template-checkbox" with {
            size: size.size,
            label: label,
            title: title,
            disabled: true
        } %}

        {% include "@template-checkbox" with {
            size: size.size,
            label: label,
            title: title,
            checked: true,
            disabled: true
        } %}

        <!-- {{ size.name }} / radio -->
        {% include "@template-checkbox" with {
            size: size.size,
            label: label,
            type: 'radio',
            title: title,
            disabled: true
        } %}

        {% include "@template-checkbox" with {
            size: size.size,
            label: label,
            type: 'radio',
            title: title,
            checked: true,
            disabled: true
        } %}

        <!-- {{ size.name }} / toggle -->
        {% include "@template-checkbox" with {
            size: size.size,
            label: label,
            type: 'toggle',
            title: title,
            disabled: true
        } %}

        {% include "@template-checkbox" with {
            size: size.size,
            label: label,
            type: 'toggle',
            title: title,
            checked: true,
            disabled: true
        } %}
    </div>

{% endfor %}

<h1 class="text-2xl uppercase font-bold text-neutral-900 pt-6">Element label only</h1>

{% for size in sizes %}
    <h2 class="text-xl uppercase font-bold border-b text-neutral-900 pt-6 mb-3">{{ size.name }}</h2>
    <div class="grid grid-cols-7 items-center gap-4">
        <h3 class="text-sm uppercase font-bold">Normal</h3>

        <!-- Label only / {{ size.name }} / checkbox -->
        {% include "@template-checkbox" with {
            size: size.size,
            label: label,
            title: '',
        } %}

        {% include "@template-checkbox" with {
            size: size.size,
            label: label,
            title: '',
            checked: true
        } %}

        <!-- Label only / {{ size.name }} / radio -->
        {% include "@template-checkbox" with {
            size: size.size,
            label: label,
            title: '',
            type: 'radio',
        } %}

        {% include "@template-checkbox" with {
            size: size.size,
            label: label,
            title: '',
            type: 'radio',
            checked: true
        } %}

        <!-- Label only / {{ size.name }} / toggle -->
        {% include "@template-checkbox" with {
            size: size.size,
            label: label,
            title: '',
            type: 'toggle',
        } %}

        {% include "@template-checkbox" with {
            size: size.size,
            label: label,
            title: '',
            type: 'toggle',
            checked: true
        } %}

        <h3 class="text-sm uppercase font-bold">Disabled</h3>

        <!-- Label only / {{ size.name }} / checkbox / disabled -->
        {% include "@template-checkbox" with {
            size: size.size,
            label: label,
            title: '',
            disabled: true
        } %}

        {% include "@template-checkbox" with {
            size: size.size,
            label: label,
            title: '',
            checked: true,
            disabled: true
        } %}

        <!-- Label only / {{ size.name }} / radio -->
        {% include "@template-checkbox" with {
            size: size.size,
            label: label,
            title: '',
            type: 'radio',
            disabled: true
        } %}

        {% include "@template-checkbox" with {
            size: size.size,
            label: label,
            title: '',
            type: 'radio',
            checked: true,
            disabled: true
        } %}

        <!-- Label only / {{ size.name }} / toggle -->
        {% include "@template-checkbox" with {
            size: size.size,
            label: label,
            title: '',
            type: 'toggle',
            disabled: true
        } %}

        {% include "@template-checkbox" with {
            size: size.size,
            label: label,
            type: 'toggle',
            title: '',
            checked: true,
            disabled: true
        } %}
    </div>
{% endfor %}

<h1 class="text-2xl uppercase font-bold text-neutral-900 pt-6">Element only</h1>
{% for size in sizes %}
    <h2 class="text-xl uppercase font-bold border-b text-neutral-900 pt-6 mb-3">{{ size.name }}</h2>
    <div class="grid grid-cols-7 items-center gap-4">
        <h3 class="text-sm uppercase font-bold">Normal</h3>

        <!-- Element only / {{ size.name }} / checkbox -->
        {% include "@template-checkbox" with {
            size: size.size,
            label: '',
            title: '',
        } %}

        {% include "@template-checkbox" with {
            size: size.size,
            label: '',
            title: '',
            checked: true
        } %}

        <!-- Element only / {{ size.name }} / radio -->
        {% include "@template-checkbox" with {
            size: size.size,
            label: '',
            title: '',
            type: 'radio',
        } %}

        {% include "@template-checkbox" with {
            size: size.size,
            label: '',
            title: '',
            type: 'radio',
            checked: true
        } %}

        <!-- Element only / {{ size.name }} / toggle -->
        {% include "@template-checkbox" with {
            size: size.size,
            label: '',
            title: '',
            type: 'toggle',
        } %}

        {% include "@template-checkbox" with {
            size: size.size,
            label: '',
            title: '',
            type: 'toggle',
            checked: true
        } %}

        <h3 class="text-sm uppercase font-bold">Disabled</h3>

        <!-- Element only / {{ size.name }} / checkbox / disabled -->
        {% include "@template-checkbox" with {
            size: size.size,
            label: '',
            title: '',
            disabled: true
        } %}

        {% include "@template-checkbox" with {
            size: size.size,
            label: '',
            title: '',
            checked: true,
            disabled: true
        } %}

        <!-- Element only / {{ size.name }} / radio -->
        {% include "@template-checkbox" with {
            size: size.size,
            label: '',
            title: '',
            type: 'radio',
            disabled: true
        } %}

        {% include "@template-checkbox" with {
            size: size.size,
            label: '',
            title: '',
            type: 'radio',
            checked: true,
            disabled: true
        } %}

        <!-- Element only / {{ size.name }} / toggle -->
        {% include "@template-checkbox" with {
            size: size.size,
            label: '',
            title: '',
            type: 'toggle',
            disabled: true
        } %}

        {% include "@template-checkbox" with {
            size: size.size,
            label: '',
            type: 'toggle',
            title: '',
            checked: true,
            disabled: true
        } %}
    </div>
{% endfor %}
 
{
  "label": "checkbox text",
  "title": "Label text",
  "sizes": [
    {
      "size": "sm",
      "name": "Small"
    },
    {
      "size": "md",
      "name": "Medium"
    },
    {
      "size": "lg",
      "name": "Large"
    }
  ]
}

No notes defined.