Barmer Fractal

Formelement Toggle: Third Party Consent Manager 

<label class="a-toggle js-consent-toggle" for="toggle-checkbox">
    <span class="toggle__text-label">Externe Inhalte zulassen</span>
    <input class="toggle__checkbox" type="checkbox" id="toggle-checkbox" />
    <span class="toggle__slider" data-text-enabled="ja" data-text-disabled="nein">
        <span class="toggle__indicator"></span>
    </span>
    <span class="sr-only toggle__alert" aria-live="polite" data-text-checked="Externe Inhalte sind jetzt zugelassen" data-text-unchecked="Externe Inhalte sind jetzt geblockt"></span>
</label>
 
<label class="a-toggle {{viewtypes.specifier}}" for="{{content.id}}">
    {{# switches.hasTextLabel}}
      <span class="toggle__text-label">{{content.textLabel}}</span>
    {{/ switches.hasTextLabel}}
    <input class="toggle__checkbox" type="checkbox" id="{{content.id}}" {{#switches.isChecked}}checked{{/switches.isChecked}}/>
    <span class="toggle__slider" data-text-enabled="{{content.textEnabled}}" data-text-disabled="{{content.textDisabled}}">
      <span class="toggle__indicator"></span>
    </span>
    <span class="sr-only toggle__alert" aria-live="polite" data-text-checked="{{content.textChecked}}" data-text-unchecked="{{content.textUnchecked}}"></span>
</label>
 
{
  "switches": {
    "hasTextLabel": true,
    "isChecked": false
  },
  "viewtypes": {
    "specifier": "js-consent-toggle"
  },
  "content": {
    "id": "toggle-checkbox",
    "textLabel": "Externe Inhalte zulassen",
    "textEnabled": "ja",
    "textDisabled": "nein",
    "textChecked": "Externe Inhalte sind jetzt zugelassen",
    "textUnchecked": "Externe Inhalte sind jetzt geblockt"
  },
  "partials": {}
}

No notes defined.