<fieldset class="radio-content">
    <legend class="radio-content__legend">Haben Sie in den letzten 18 Monaten Ihren Arbeitgeber gewechselt?*</legend>
    <div class="radio-content__checkboxes">
        <div class="radio-content__checkbox">
            <label class="radio">
  <input class="radio__input radio-content__toggle--show" type="radio" value="1" required="required" name="radio-content-group" id="radio-d888"/><span class="radio__indicator"></span><span class="radio__label">Ja</span>
</label>
        </div>
        <div class="radio-content__checkbox">
            <label class="radio">
  <input class="radio__input radio-content__toggle--hide" type="radio" value="1" required="required" name="radio-content-group" id="radio-dd81"/><span class="radio__indicator"></span><span class="radio__label">Nein</span>
</label>
        </div>
    </div>
    <div class="radio-content__content" aria-hidden="true">
        <div class="radio-content__body">
            <div class="form-group">
                <label class="label" for="form-group-select">Wie viele Familienangehörige möchten Sie kostenlos mitversichern?</label>
                <div class="form-group__inner">
                    <select class="select" id="form-group-select" name="form-group-select">
  <option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
  <option value="Option 1 value" id="option1Id">Option 1</option>
  <option value="Option 2 value" id="option2Id">Option 2 wirklich, wirklich extra lang. Also wirklich extra lang.</option>
  <option value="Option 3 value" id="option3Id">Option 3</option>
</select>
                </div>
            </div>
        </div>
    </div>
</fieldset>
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

//- Render radio with content
fieldset.radio-content&attributes(attr)
  //- Legend
  if legend
    legend.radio-content__legend #{legend}

  //- Checkboxes
  if items
    .radio-content__checkboxes
      each item in items
        .radio-content__checkbox
          != include('@radio', { text: item.text, required, attr: { name: item.name, class: item.show && 'radio-content__toggle--show' || !item.show && 'radio-content__toggle--hide' }})

  //- Content
  if content
    .radio-content__content(aria-hidden='true')
      each contentItem in content
        if contentItem.use
          .radio-content__body
            != include(`@${contentItem.use}`, contentItem.settings)
{
  "legend": "Haben Sie in den letzten 18 Monaten Ihren Arbeitgeber gewechselt?*",
  "required": true,
  "items": [
    {
      "text": "Ja",
      "name": "radio-content-group",
      "show": true
    },
    {
      "text": "Nein",
      "name": "radio-content-group"
    }
  ],
  "content": [
    {
      "use": "form-group--select",
      "settings": {
        "label": "Wie viele Familienangehörige möchten Sie kostenlos mitversichern?"
      }
    }
  ]
}
  • Content:
    class RadioContent {
      constructor($el) {
        this.$el = $el;
        this.$inputShow = this.$el.querySelector('.radio-content__toggle--show');
        this.$inputHide = this.$el.querySelector('.radio-content__toggle--hide');
        this.$content = this.$el.querySelector('.radio-content__content');
    
        this.init();
      }
    
      init() {
        this.$inputShow.addEventListener('change', () => {
          if (this.$inputShow.checked) this.showContent();
          else this.hideContent();
        });
    
        this.$inputHide.addEventListener('change', () => {
          if (this.$inputHide.checked) this.hideContent();
        });
      }
    
      showContent() {
        this.$content.setAttribute('aria-hidden', 'false');
      }
    
      hideContent() {
        this.$content.setAttribute('aria-hidden', 'true');
      }
    }
    
    // Initialize radio
    document
      .querySelectorAll('.radio-content')
      .forEach($el => new RadioContent($el));
    
  • URL: /components/raw/radio-content/radio-content.js
  • Filesystem Path: src/components/molecules/radio-content/radio-content.js
  • Size: 864 Bytes
  • Content:
    .radio-content {
      border: 0;
      padding: 0;
    }
    
    .radio-content__legend {
      font-size: 1.5rem;
      margin-bottom: 2rem;
    }
    
    .radio-content__checkbox:not(:last-child) {
      margin-bottom: 1.5rem;
    }
    
    .radio-content__content {
      display: none;
      margin-top: 2rem;
      padding-left: 3rem;
    
      &[aria-hidden='false'] {
        display: block;
      }
    }
    
  • URL: /components/raw/radio-content/radio-content.scss
  • Filesystem Path: src/components/molecules/radio-content/radio-content.scss
  • Size: 330 Bytes

There are no notes for this item.