Checkboxes

Ready

HTML
View
Context
Info
Notes


        
        <div class="text-2xl uppercase font-bold text-neutral-900 pb-4">Element + text right</div>

<div class="grid grid-cols-7 items-center gap-4">
    <div class="text-sm uppercase font-bold pl-4">Normal</div>

    <!-- checkbox -->

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-checkbox  ">
        <input type="checkbox" id="631719598" name="checkbox1" class="" value="" @input.debounce="onChange">
        <span class="
                 ">
            Text
        </span>
    </label>

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-checkbox  ">
        <input checked type="checkbox" id="2077082983" name="checkbox2" class="" value="" @input.debounce="onChange">
        <span class="
                 ">
            Text
        </span>
    </label>

    <!-- radio -->

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-radio  ">
        <input type="radio" id="817133021" name="radio1" class="" value="" @input.debounce="onChange">
        <span class="
                 ">
            Text
        </span>
    </label>

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-radio  ">
        <input checked type="radio" id="1822404431" name="radio1" class="" value="" @input.debounce="onChange">
        <span class="
                 ">
            Text
        </span>
    </label>

    <!-- toggle -->

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-toggle  ">
        <input type="checkbox" id="1313842468" name="toggle1" class="" value="" @input.debounce="onChange">
        <div class="toggle"></div>
        <span class="
                 ">
            Text
        </span>
    </label>

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-toggle  ">
        <input checked type="checkbox" id="357695599" name="toggle2" class="" value="" @input.debounce="onChange">
        <div class="toggle"></div>
        <span class="
                 ">
            Text
        </span>
    </label>

    <div class="text-sm uppercase font-bold pl-4">Disabled</div>

    <!-- toggle -->

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-toggle  ">
        <input disabled type="checkbox" id="1437626909" name="toggle3" class="" value="" @input.debounce="onChange">
        <div class="toggle"></div>
        <span class="
                 ">
            Text
        </span>
    </label>

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-toggle  ">
        <input checked disabled type="checkbox" id="2016188529" name="toggle4" class="" value="" @input.debounce="onChange">
        <div class="toggle"></div>
        <span class="
                 ">
            Text
        </span>
    </label>
</div>

<h1 class="text-2xl uppercase font-bold text-neutral-900 py-3">Element + text left</h1>

<div class="grid grid-cols-7 items-center gap-4">
    <div class="text-sm uppercase font-bold pl-4">Normal</div>

    <!-- checkbox -->

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-checkbox  ">
        <input type="checkbox" id="1073737764" name="checkbox3" class="" value="" @input.debounce="onChange">
        <span class="-order-1
                 ">
            Text
        </span>
    </label>

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-checkbox  ">
        <input checked type="checkbox" id="64216968" name="checkbox4" class="" value="" @input.debounce="onChange">
        <span class="-order-1
                 ">
            Text
        </span>
    </label>

    <!-- radio -->

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-radio  ">
        <input type="radio" id="224402530" name="radio2" class="" value="" @input.debounce="onChange">
        <span class="-order-1
                 ">
            Text
        </span>
    </label>

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-radio  ">
        <input checked type="radio" id="1698149079" name="radio2" class="" value="" @input.debounce="onChange">
        <span class="-order-1
                 ">
            Text
        </span>
    </label>

    <!-- toggle -->

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-toggle  ">
        <input type="checkbox" id="996169382" name="toggle5" class="" value="" @input.debounce="onChange">
        <div class="toggle"></div>
        <span class="-order-1
                 ">
            Text
        </span>
    </label>

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-toggle  ">
        <input checked type="checkbox" id="913247952" name="toggle6" class="" value="" @input.debounce="onChange">
        <div class="toggle"></div>
        <span class="-order-1
                 ">
            Text
        </span>
    </label>

    <div class="text-sm uppercase font-bold pl-4">Disabled</div>

    <!-- toggle -->

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-toggle  ">
        <input disabled type="checkbox" id="1239591305" name="toggle7" class="" value="" @input.debounce="onChange">
        <div class="toggle"></div>
        <span class="-order-1
                 ">
            Text
        </span>
    </label>

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-toggle  ">
        <input checked disabled type="checkbox" id="2057526282" name="toggle8" class="" value="" @input.debounce="onChange">
        <div class="toggle"></div>
        <span class="-order-1
                 ">
            Text
        </span>
    </label>
</div>

<h1 class="text-2xl uppercase font-bold text-neutral-900 py-3">Element only</h1>

<div class="grid grid-cols-7 items-center gap-4">
    <div class="text-sm uppercase font-bold pl-4">Normal</div>

    <!-- Element only / checkbox -->

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-checkbox  ">
        <input type="checkbox" id="793025336" name="checkbox5" class="" value="" @input.debounce="onChange">
        <span class="
                 sr-only">
            Text
        </span>
    </label>

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-checkbox  ">
        <input checked type="checkbox" id="201539507" name="checkbox6" class="" value="" @input.debounce="onChange">
        <span class="
                 sr-only">
            Text
        </span>
    </label>

    <!-- Element only / radio -->

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-radio  ">
        <input type="radio" id="283123047" name="radio3" class="" value="" @input.debounce="onChange">
        <span class="
                 sr-only">
            Text
        </span>
    </label>

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-radio  ">
        <input checked type="radio" id="635460978" name="radio3" class="" value="" @input.debounce="onChange">
        <span class="
                 sr-only">
            Text
        </span>
    </label>

    <!-- Element only / toggle -->

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-toggle  ">
        <input type="checkbox" id="1611599786" name="toggle9" class="" value="" @input.debounce="onChange">
        <div class="toggle"></div>
        <span class="
                 sr-only">
            Text
        </span>
    </label>

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-toggle  ">
        <input checked type="checkbox" id="578517199" name="toggle10" class="" value="" @input.debounce="onChange">
        <div class="toggle"></div>
        <span class="
                 sr-only">
            Text
        </span>
    </label>

    <div class="text-sm uppercase font-bold pl-4">Disabled</div>

    <!-- Element only / toggle -->

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-toggle  ">
        <input disabled type="checkbox" id="1919570272" name="toggle11" class="" value="" @input.debounce="onChange">
        <div class="toggle"></div>
        <span class="
                 sr-only">
            Text
        </span>
    </label>

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-toggle  ">
        <input checked disabled type="checkbox" id="499468955" name="toggle12" class="" value="" @input.debounce="onChange">
        <div class="toggle"></div>
        <span class="
                 sr-only">
            Text
        </span>
    </label>
</div>

<div class="grid grid-cols-7 items-center gap-4 mt-4 py-4 bg-black">
    <div class="text-sm uppercase font-bold text-white pl-4">Dark</div>

    <!-- checkbox -->

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-checkbox dark ">
        <input type="checkbox" id="911958963" name="checkbox7" class="dark" value="" @input.debounce="onChange">
        <span class="
                 ">
            Text
        </span>
    </label>

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-checkbox dark ">
        <input checked type="checkbox" id="1624157846" name="checkbox8" class="dark" value="" @input.debounce="onChange">
        <span class="
                 ">
            Text
        </span>
    </label>

    <!-- radio -->

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-radio dark ">
        <input type="radio" id="124220323" name="radio4" class="dark" value="" @input.debounce="onChange">
        <span class="
                 ">
            Text
        </span>
    </label>

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-radio dark ">
        <input checked type="radio" id="1962172198" name="radio4" class="dark" value="" @input.debounce="onChange">
        <span class="
                 ">
            Text
        </span>
    </label>

    <!-- toggle -->

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-toggle dark ">
        <input type="checkbox" id="493637341" name="toggle13" class="dark" value="" @input.debounce="onChange">
        <div class="toggle"></div>
        <span class="
                 ">
            Text
        </span>
    </label>

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-toggle dark ">
        <input checked type="checkbox" id="950618786" name="toggle14" class="dark" value="" @input.debounce="onChange">
        <div class="toggle"></div>
        <span class="
                 ">
            Text
        </span>
    </label>

    <div class="text-sm uppercase font-bold text-white pl-4">Disabled</div>

    <!-- toggle -->

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-toggle dark ">
        <input disabled type="checkbox" id="787418902" name="toggle15" class="dark" value="" @input.debounce="onChange">
        <div class="toggle"></div>
        <span class="
                 ">
            Text
        </span>
    </label>

    <!-- replace identifiers with normal values (for,id,name etc...) -->
    <label class="selection-control-label selection-control-toggle dark ">
        <input checked disabled type="checkbox" id="934936131" name="toggle16" class="dark" value="" @input.debounce="onChange">
        <div class="toggle"></div>
        <span class="
                 ">
            Text
        </span>
    </label>
</div>


        <div class="text-2xl uppercase font-bold text-neutral-900 pb-4">Element + text right</div>

<div class="grid grid-cols-7 items-center gap-4">
    <div class="text-sm uppercase font-bold pl-4">Normal</div>

    <!-- checkbox -->
    {% include "@template-checkbox" with {
        label: label,
        name: 'checkbox1',
    } %}

    {% include "@template-checkbox" with {
        label: label,
        checked: true,
        name: 'checkbox2',
    } %}

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

    {% include "@template-checkbox" with {
        label: label,
        type: 'radio',
        checked: true,
        name: 'radio1',
    } %}

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

    {% include "@template-checkbox" with {
        label: label,
        type: 'toggle',
        checked: true,
        name: 'toggle2',
    } %}

    <div class="text-sm uppercase font-bold pl-4">Disabled</div>

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

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

<h1 class="text-2xl uppercase font-bold text-neutral-900 py-3">Element + text left</h1>

<div class="grid grid-cols-7 items-center gap-4">
    <div class="text-sm uppercase font-bold pl-4">Normal</div>

    <!-- checkbox -->
    {% include "@template-checkbox" with {
        label: label,
        label_before: true,
        name: 'checkbox3',
    } %}

    {% include "@template-checkbox" with {
        label: label,
        label_before: true,
        checked: true,
        name: 'checkbox4',
    } %}

    <!-- radio -->
    {% include "@template-checkbox" with {
        label: label,
        label_before: true,
        type: 'radio',
        name: 'radio2',
    } %}

    {% include "@template-checkbox" with {
        label: label,
        label_before: true,
        type: 'radio',
        checked: true,
        name: 'radio2',
    } %}

    <!-- toggle -->
    {% include "@template-checkbox" with {
        label: label,
        label_before: true,
        type: 'toggle',
        name: 'toggle5',
    } %}

    {% include "@template-checkbox" with {
        label: label,
        label_before: true,
        type: 'toggle',
        checked: true,
        name: 'toggle6',
    } %}

    <div class="text-sm uppercase font-bold pl-4">Disabled</div>

    <!-- toggle -->
    {% include "@template-checkbox" with {
        label: label,
        label_before: true,
        type: 'toggle',
        disabled: true,
        name: 'toggle7',
    } %}

    {% include "@template-checkbox" with {
        label: label,
        label_before: true,
        type: 'toggle',
        checked: true,
        disabled: true,
        name: 'toggle8',
    } %}
</div>

<h1 class="text-2xl uppercase font-bold text-neutral-900 py-3">Element only</h1>

<div class="grid grid-cols-7 items-center gap-4">
    <div class="text-sm uppercase font-bold pl-4">Normal</div>

    <!-- Element only / checkbox -->
    {% include "@template-checkbox" with {
        label: label,
        show_label: false,
        name: 'checkbox5',
    } %}

    {% include "@template-checkbox" with {
        label: label,
        show_label: false,
        checked: true,
        name: 'checkbox6',
    } %}

    <!-- Element only / radio -->
    {% include "@template-checkbox" with {
        label: label,
        show_label: false,
        type: 'radio',
        name: 'radio3',
    } %}

    {% include "@template-checkbox" with {
        label: label,
        show_label: false,
        type: 'radio',
        checked: true,
        name: 'radio3',
    } %}

    <!-- Element only / toggle -->
    {% include "@template-checkbox" with {
        label: label,
        show_label: false,
        type: 'toggle',
        name: 'toggle9',
    } %}

    {% include "@template-checkbox" with {
        label: label,
        show_label: false,
        type: 'toggle',
        checked: true,
        name: 'toggle10',
    } %}

    <div class="text-sm uppercase font-bold pl-4">Disabled</div>

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

    {% include "@template-checkbox" with {
        label: label,
        show_label: false,
        type: 'toggle',
        checked: true,
        disabled: true,
        name: 'toggle12',
    } %}
</div>


<div class="grid grid-cols-7 items-center gap-4 mt-4 py-4 bg-black">
    <div class="text-sm uppercase font-bold text-white pl-4">Dark</div>

    <!-- checkbox -->
    {% include "@template-checkbox" with {
        label: label,
        color: "dark",
        name: 'checkbox7',
    } %}

    {% include "@template-checkbox" with {
        label: label,
        color: "dark",
        checked: true,
        name: 'checkbox8',

    } %}

    <!-- radio -->
    {% include "@template-checkbox" with {
        label: label,
        color: "dark",
        type: 'radio',
        name: 'radio4',
    } %}

    {% include "@template-checkbox" with {
        label: label,
        color: "dark",
        type: 'radio',
        checked: true,
        name: 'radio4',
    } %}

    <!-- toggle -->
    {% include "@template-checkbox" with {
        label: label,
        color: "dark",
        type: 'toggle',
        name: 'toggle13',
    } %}

    {% include "@template-checkbox" with {
        label: label,
        color: "dark",
        type: 'toggle',
        checked: true,
        name: 'toggle14',
    } %}

    <div class="text-sm uppercase font-bold text-white pl-4">Disabled</div>

    <!-- toggle -->
    {% include "@template-checkbox" with {
        label: label,
        color: "dark",
        type: 'toggle',
        disabled: true,
        name: 'toggle15',
    } %}

    {% include "@template-checkbox" with {
        label: label,
        color: "dark",
        type: 'toggle',
        checked: true,
        disabled: true,
        name: 'toggle16',
    } %}
</div>


        
            
            {
  "label": "Text",
  "show_label": true
}

Handle: @checkboxes
Preview:
- With layout
- Component only
Filesystem Path: src/components/molecules/inputs/checkboxes/checkboxes.twig
References (1): @template-checkbox

Checkbox guide

How to use

Template name

template-checkbox

Import

{% render "@template-checkbox" with {...} %}

Available props

label: string | default: null
color: dark | default: null
type: checkbox, radio, toggle | default: checkbox
label_before: true, false | default: false
disabled: true, false | default: false
checked: true, false | default: false