Etat Pur Design System

Checkboxes 

<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="2109029556" 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="1860287597" 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="809978694" 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="2021745228" 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="895632635" 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="107784599" 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="563411749" 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="1927743914" 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="1954568284" 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="391243093" 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="1310130011" 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="1361996304" 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="1007568966" 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="785219975" 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="1180081577" 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="1931554615" 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="1364752840" 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="1955867565" 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="1171972032" 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="1275392762" 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="794666829" 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="1415464046" 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="1652618547" 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="1378899401" 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="1170197482" 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="549829998" 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="2073314365" 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="152178084" 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="1727315496" 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="889265589" 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="2043503700" 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="267592326" 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
}

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