Vebego Component Library

Checkbox 

<!-- Default -->
<div class="atm-form-checkbox ">
     <input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
     <label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>

 </div>


<!-- Checked -->
<div class="atm-form-checkbox ">
     <input class="form-checkbox" type="checkbox" id="checkbox-checked" name="checkbox-checked" checked>
     <label class="atm-form-label form-label " for="checkbox-checked">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>

 </div>


<!-- Disabled -->
<div class="atm-form-checkbox ">
     <input class="form-checkbox" type="checkbox" id="checkbox-disabled" name="checkbox-disabled" disabled>
     <label class="atm-form-label form-label " for="checkbox-disabled">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>

 </div>


<!-- Checked Disabled -->
<div class="atm-form-checkbox ">
     <input class="form-checkbox" type="checkbox" id="checkbox-checked-disabled" name="checkbox-checked-disabled" checked disabled>
     <label class="atm-form-label form-label " for="checkbox-checked-disabled">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>

 </div>


<div class="atm-form-checkbox {{modifier}}">
  <input
    class="form-checkbox" 
    type="checkbox" 
    {{#if id}}id="{{id}}"{{/if}}
    {{#if name}}name="{{name}}"{{/if}}
    {{#if value}}value="{{value}}"{{/if}}
    {{#if checked}}checked{{/if}}
    {{#if disabled}}disabled{{/if}}
    {{#if submitFormOnChange}}onchange="this.form.submit()"{{/if}}>
    {{render '@label' label merge=true}}
</div>
 
/* Default */
{
  "modifier": "",
  "id": "checkbox",
  "name": "checkbox",
  "value": "",
  "checked": false,
  "disabled": false,
  "label": {
    "text": "Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.",
    "for": "checkbox"
  },
  "submitFormOnChange": false
}


/* Checked */
{
  "modifier": "",
  "id": "checkbox-checked",
  "name": "checkbox-checked",
  "value": "",
  "checked": true,
  "disabled": false,
  "label": {
    "text": "Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.",
    "for": "checkbox-checked"
  },
  "submitFormOnChange": false
}


/* Disabled */
{
  "modifier": "",
  "id": "checkbox-disabled",
  "name": "checkbox-disabled",
  "value": "",
  "checked": false,
  "disabled": true,
  "label": {
    "text": "Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.",
    "for": "checkbox-disabled"
  },
  "submitFormOnChange": false
}


/* Checked Disabled */
{
  "modifier": "",
  "id": "checkbox-checked-disabled",
  "name": "checkbox-checked-disabled",
  "value": "",
  "checked": true,
  "disabled": true,
  "label": {
    "text": "Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.",
    "for": "checkbox-checked-disabled"
  },
  "submitFormOnChange": false
}
  • Content: 
    .atm-form-checkbox {
    @apply relative;
    @apply pl-6;

    .form-checkbox {
        @apply absolute left-0;
        top: 1px;
        @apply text-cta;

        &[disabled] {
            @apply text-shade;

            + .atm-form-label {
                @apply text-shade;
            }
        }
    }

    a {
        @apply text-cta;
        @apply underline;
    }
}
  • URL: /components/raw/checkbox/checkbox.css
  • Filesystem Path: src\components\02-atoms\forms\checkbox\checkbox.css
  • Size: 399 Bytes

No notes defined.