UHasselt Component Library

Toggle 

<!-- Default -->
<div class="toggle">
    <input type="checkbox" name="toggle" id="toggle-default" class="toggle-checkbox" />
    <span class="toggle-background"></span>
</div>


<!-- Toggle Checked -->
<div class="toggle">
    <input type="checkbox" name="toggle" id="toggle-checked" checked class="toggle-checkbox" />
    <span class="toggle-background"></span>
</div>


<!-- Toggle Disabled -->
<div class="toggle">
    <input type="checkbox" name="toggle" id="toggle-disabled" disabled class="toggle-checkbox" />
    <span class="toggle-background"></span>
</div>


<!-- Toggle Checked Disabled -->
<div class="toggle">
    <input type="checkbox" name="toggle" id="toggle-checked-disabled" checked disabled class="toggle-checkbox" />
    <span class="toggle-background"></span>
</div>


<div class="toggle">
    <input 
        type="checkbox" 
        name="{{name}}" 
        id="{{id}}" 
        {{#if checked }}checked{{/if}}
        {{#if disabled}}disabled{{/if}}
        class="toggle-checkbox"/>
    <span class="toggle-background"></span>
</div>
 
/* Default */
{
  "checked": false,
  "disabled": false,
  "name": "toggle",
  "id": "toggle-default"
}


/* Toggle Checked */
{
  "checked": true,
  "disabled": false,
  "name": "toggle",
  "id": "toggle-checked"
}


/* Toggle Disabled */
{
  "checked": false,
  "disabled": true,
  "name": "toggle",
  "id": "toggle-disabled"
}


/* Toggle Checked Disabled */
{
  "checked": true,
  "disabled": true,
  "name": "toggle",
  "id": "toggle-checked-disabled"
}
  • Content: 
    .toggle {
    @apply relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in;

    .toggle-checkbox {
        @apply absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer;

        &:checked {
            @apply right-0 border-green-600;
        }

        &:checked + .toggle-background {
            @apply bg-green-600;
        }

        &[disabled] {
            @apply cursor-not-allowed;
        }

        &[disabled] + .toggle-background {
            @apply cursor-not-allowed;
        }
    }

    .toggle-background {
        @apply block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer;
    }
}
  • URL: /components/raw/toggle/toggle.css
  • Filesystem Path: src\components\02-atoms\forms\toggle\toggle.css
  • Size: 711 Bytes

No notes defined.