<!-- Standard -->
<label class="checkbox">
  <input class="checkbox__input" type="checkbox" value="1" id="checkbox-1e25" name="checkbox-1e25"/><span class="checkbox__indicator"></span><span class="checkbox__label">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</span>
</label>

<!-- Deaktiviert -->
<label class="checkbox checkbox--disabled">
  <input class="checkbox__input" type="checkbox" value="1" id="checkbox-4521" name="checkbox-4521" disabled="disabled"/><span class="checkbox__indicator"></span><span class="checkbox__label">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</span>
</label>

<!-- Deaktiviert, ausgewählt -->
<label class="checkbox checkbox--disabled">
  <input class="checkbox__input" type="checkbox" value="1" checked="checked" id="checkbox-4aa2" name="checkbox-4aa2" disabled="disabled"/><span class="checkbox__indicator"></span><span class="checkbox__label">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</span>
</label>

<!-- Invalide -->
<label class="checkbox checkbox--invalid">
  <input class="checkbox__input" type="checkbox" value="1" required="required" id="checkbox-3bf4" name="checkbox-3bf4" aria-invalid="true"/><span class="checkbox__indicator"></span><span class="checkbox__label">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</span>
</label>

-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);
  attr.id = id || attr.id || `checkbox-${randomString()}`;
  attr.name = name || attr.name || attr.id;

  //- Prepare wrapAttr object
  wrapAttr = wrapAttr || {};
  wrapAttr.class = classList(wrapAttr.class);

  //- Process options
  if (disabled) {
    attr.disabled = true;
    wrapAttr.class.push('checkbox--disabled');
  }

  if (invalid) {
    attr['aria-invalid'] = 'true';
    wrapAttr.class.push('checkbox--invalid');
  }

//- Render atom
label.checkbox&attributes(wrapAttr)
  input.checkbox__input(type='checkbox', value=value, checked=checked, required=required)&attributes(attr)
  span.checkbox__indicator
  span.checkbox__label
    if text
      | #{text}
    
    if html
      != renderPug(html)
/* Standard */
{
  "value": 1,
  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor."
}

/* Deaktiviert */
{
  "value": 1,
  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.",
  "disabled": true
}

/* Deaktiviert, ausgewählt */
{
  "value": 1,
  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.",
  "disabled": true,
  "checked": true
}

/* Invalide */
{
  "value": 1,
  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.",
  "invalid": true,
  "required": true
}

  • Content:
    class CheckboxGroup {
      constructor($el) {
        this.$el = $el;
        this.$targets = document.querySelectorAll('.tool-banner__button .button');
    
        this.group = this.$el.dataset.checkboxGroup;
    
        this.init();
      }
    
      init() {
        this.updateState();
    
        this.$el.addEventListener('change', () => {
          this.updateState();
        });
      }
    
      updateState() {
        if (this.allGroupItemsChecked()) this.enableTargets();
        else this.disableTargets();
      }
    
      enableTargets() {
        this.$targets.forEach(($target) => {
          $target.classList.remove('button--inactive');
        });
      }
    
      disableTargets() {
        this.$targets.forEach(($target) => {
          $target.classList.add('button--inactive');
        });
      }
    
      allGroupItemsChecked() {
        return [...this.groupItems()].filter(
          item => item.checked,
        ).length === this.groupItems().length;
      }
    
      groupItems() {
        return document.querySelectorAll(`[data-checkbox-group=${this.group}]`);
      }
    }
    
    // Initialize CheckboxGroup
    document.querySelectorAll('[data-checkbox-group]').forEach(
      $el => new CheckboxGroup($el),
    );
    
  • URL: /components/raw/checkbox/checkbox-group.js
  • Filesystem Path: src/components/atoms/checkbox/checkbox-group.js
  • Size: 1.1 KB
  • Content:
    .checkbox {
      cursor: pointer;
      display: inline-flex;
      min-height: 2rem;
      padding-left: 3rem;
      position: relative;
    
      // Inline stacked
      & + & {
        margin-left: $spacer;
      }
    }
    
    .checkbox--disabled {
      cursor: not-allowed;
    }
    
    .checkbox--right {
      .checkbox__indicator {
        left: auto;
        right: 0;
      }
    
      .checkbox__label {
        padding-left: 0;
        padding-right: 3rem;
      }
    }
    
    .checkbox__input {
      opacity: 0;
      position: absolute;
      z-index: -1;
    }
    
    .checkbox__indicator {
      @mixin checkbox-svg($color: $color-blue) {
        background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 9"><path fill="none" stroke="' + $color + '" stroke-width="2" d="M1 4.33l3.06 3.34L10.16 1" stroke-linecap="round" stroke-linejoin="round"/></svg>');
      }
    
      background-color: #fff;
      border: 1px solid $color-steelgrey-xdark;
      border-radius: 3px;
      height: 2rem;
      left: 0;
      pointer-events: none;
      position: absolute;
      top: 0;
      user-select: none;
      width: 2rem;
    
      &::after {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 12px 9px;
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
      }
    
      // Focus, hover style
      .checkbox__input:not([disabled]):focus ~ &::after,
      .checkbox:not(.checkbox--disabled):hover &::after {
        @include checkbox-svg($color-steelgrey-light);
      }
    
      // checkbox button is selected
      .checkbox__input:not([disabled]):checked ~ &::after {
        @include checkbox-svg($color-blue);
      }
    
      // checkbox button is selected, but disabled
      .checkbox__input[disabled]:checked ~ &::after {
        @include checkbox-svg($color-steelgrey-dark);
      }
    
      // Disabled
      .checkbox__input[disabled] ~ & {
        border-color: $color-steelgrey-dark;
      }
    
      // Invalid
      .checkbox__input[aria-invalid='true']:invalid ~ & {
        background-color: rgba($color-red, 0.2);
        border-color: $color-red;
      }
    
      // Invalid hover, focus
      .checkbox__input[aria-invalid='true']:invalid:focus ~ &::after,
      .checkbox--invalid:hover .checkbox__input[aria-invalid='true']:invalid ~ &::after {
        @include checkbox-svg(rgba($color-red, 0.3));
      }
    }
    
    .checkbox__label {
      align-self: center;
      font-size: 1.5rem;
      margin-top: -2px;
    
      // Disabled
      .checkbox__input[disabled] ~ & {
        color: $color-steelgrey-xdark;
      }
    
      // Invalid
      .checkbox--invalid .checkbox__input:invalid ~ &,
      .checkbox__input[aria-invalid='true']:invalid ~ & {
        color: $color-red;
        font-weight: bold;
      }
    }
    
  • URL: /components/raw/checkbox/checkbox.scss
  • Filesystem Path: src/components/atoms/checkbox/checkbox.scss
  • Size: 2.5 KB

There are no notes for this item.