<!-- Eingabefeld -->
<div class="form-group">
  <label class="label form-group__label" for="form-group-bf38">Eingabefeld</label>
  <input class="input" id="form-group-bf38" name="form-group-bf38" type="text"></input>
</div>

{
  "label": "Eingabefeld",
  "settings": {
    "type": "text"
  }
}

<!-- Eingabefeld mit Beschreibung -->
<div class="form-group">
  <label class="label form-group__label" for="form-group-b5bf">Eingabefeld</label>
  <input class="input" id="form-group-b5bf" name="form-group-b5bf" type="text" aria-describedby="form-group-b5bf-description"></input>
  <p class="form-group__description" id="form-group-b5bf-description">Das ist eine Beschreibung für das Feld.</p>
</div>

{
  "label": "Eingabefeld",
  "settings": {
    "type": "text"
  },
  "description": "Das ist eine Beschreibung für das Feld."
}

<!-- Eingabefeld (erforderlich) -->
<div class="form-group">
  <label class="label form-group__label" for="form-group-d39d">Eingabefeld
    <abbr class="label__required" title="Pflichtfeld">*</abbr>
  </label>
  <input class="input" id="form-group-d39d" name="form-group-d39d" type="text" required="required"></input>
</div>

{
  "label": "Eingabefeld",
  "settings": {
    "type": "text"
  },
  "required": true
}

<!-- Eingabefeld (deaktiviert) -->
<div class="form-group">
  <label class="label label--disabled form-group__label" for="form-group-5b4b">Eingabefeld</label>
  <input class="input" id="form-group-5b4b" name="form-group-5b4b" type="text" disabled="disabled"></input>
</div>

{
  "label": "Eingabefeld",
  "settings": {
    "type": "text"
  },
  "disabled": true
}

<!-- Eingabefeld (ungültig) -->
<div class="form-group">
  <label class="label label--invalid form-group__label" for="form-group-ca54">Eingabefeld</label>
  <input class="input" id="form-group-ca54" name="form-group-ca54" value="Text" aria-invalid="true" aria-errormessage="form-group-ca54-error"></input>
  <p class="form-group__error" id="form-group-ca54-error">Das ist eine Fehlermeldung</p>
</div>

{
  "label": "Eingabefeld",
  "settings": {
    "value": "Text"
  },
  "invalid": true,
  "error": "Das ist eine Fehlermeldung"
}

<!-- Textblock -->
<div class="form-group">
  <label class="label form-group__label" for="form-group-7a72">Ein Eingabefeld für Text-Block</label>
  <textarea class="input input--textarea" id="form-group-7a72" name="form-group-7a72" type="textarea" placeholder="Das ist ein Platzhalter"></textarea>
</div>

{
  "label": "Ein Eingabefeld für Text-Block",
  "settings": {
    "type": "textarea",
    "placeholder": "Das ist ein Platzhalter"
  }
}

<!-- Textblock mit Beschreibung -->
<div class="form-group">
  <label class="label form-group__label" for="form-group-42d4">Ein Eingabefeld für Text-Block</label>
  <textarea class="input input--textarea" id="form-group-42d4" name="form-group-42d4" type="textarea" placeholder="Das ist ein Platzhalter" aria-describedby="form-group-42d4-description"></textarea>
  <p class="form-group__description" id="form-group-42d4-description">Das ist eine Beschreibung für das Feld.</p>
</div>

{
  "label": "Ein Eingabefeld für Text-Block",
  "settings": {
    "type": "textarea",
    "placeholder": "Das ist ein Platzhalter"
  },
  "description": "Das ist eine Beschreibung für das Feld."
}

<!-- Textblock (erforderlich) -->
<div class="form-group">
  <label class="label form-group__label" for="form-group-e5bf">Ein Eingabefeld für Text-Block
    <abbr class="label__required" title="Pflichtfeld">*</abbr>
  </label>
  <textarea class="input input--textarea" id="form-group-e5bf" name="form-group-e5bf" type="textarea" placeholder="Das ist ein Platzhalter" required="required"></textarea>
</div>

{
  "label": "Ein Eingabefeld für Text-Block",
  "settings": {
    "type": "textarea",
    "placeholder": "Das ist ein Platzhalter"
  },
  "required": true
}

<!-- Textblock (deaktiviert) -->
<div class="form-group">
  <label class="label label--disabled form-group__label" for="form-group-a449">Ein Eingabefeld für Text-Block</label>
  <textarea class="input input--textarea" id="form-group-a449" name="form-group-a449" type="textarea" placeholder="Das ist ein Platzhalter" disabled="disabled"></textarea>
</div>

{
  "label": "Ein Eingabefeld für Text-Block",
  "settings": {
    "type": "textarea",
    "placeholder": "Das ist ein Platzhalter"
  },
  "disabled": true
}

<!-- Textblock (ungültig) -->
<div class="form-group">
  <label class="label label--invalid form-group__label" for="form-group-84b3">Ein Eingabefeld für Text-Block</label>
  <textarea class="input input--textarea" id="form-group-84b3" name="form-group-84b3" type="textarea" placeholder="Das ist ein Platzhalter" aria-invalid="true" aria-errormessage="form-group-84b3-error"></textarea>
  <p class="form-group__error" id="form-group-84b3-error">Das ist eine Fehlermeldung</p>
</div>

{
  "label": "Ein Eingabefeld für Text-Block",
  "settings": {
    "type": "textarea",
    "placeholder": "Das ist ein Platzhalter"
  },
  "invalid": true,
  "error": "Das ist eine Fehlermeldung"
}

<!-- Auswahlfeld -->
<div class="form-group">
  <label class="label form-group__label" for="form-group-4ad1">Auswahlfeld</label>
  <select class="select" id="form-group-4ad1" name="form-group-4ad1">
    <option class="select__hint" disabled="disabled" selected="selected" value="">alle</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>

{
  "label": "Auswahlfeld",
  "use": "select",
  "settings": {
    "hasPleaseSelectOption": true,
    "options": [
      "Option 1",
      "Option 2",
      "Option 3"
    ]
  }
}

<!-- Auswahlfeld mit Beschreibung -->
<div class="form-group">
  <label class="label form-group__label" for="form-group-da4e">Auswahlfeld</label>
  <select class="select" id="form-group-da4e" name="form-group-da4e" aria-describedby="form-group-da4e-description">
    <option class="select__hint" disabled="disabled" selected="selected" value="">alle</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <p class="form-group__description" id="form-group-da4e-description">Das ist eine Beschreibung für das Feld.</p>
</div>

{
  "label": "Auswahlfeld",
  "use": "select",
  "settings": {
    "hasPleaseSelectOption": true,
    "options": [
      "Option 1",
      "Option 2",
      "Option 3"
    ]
  },
  "description": "Das ist eine Beschreibung für das Feld."
}

<!-- Auswahlfeld (erforderlich) -->
<div class="form-group">
  <label class="label form-group__label" for="form-group-7551">Auswahlfeld
    <abbr class="label__required" title="Pflichtfeld">*</abbr>
  </label>
  <select class="select" id="form-group-7551" name="form-group-7551" required="required">
    <option class="select__hint" disabled="disabled" selected="selected" value="">alle</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>

{
  "label": "Auswahlfeld",
  "use": "select",
  "settings": {
    "hasPleaseSelectOption": true,
    "options": [
      "Option 1",
      "Option 2",
      "Option 3"
    ]
  },
  "required": true
}

<!-- Auswahlfeld (deaktiviert) -->
<div class="form-group">
  <label class="label label--disabled form-group__label" for="form-group-05a4">Auswahlfeld</label>
  <select class="select" id="form-group-05a4" name="form-group-05a4" disabled="disabled">
    <option class="select__hint" disabled="disabled" selected="selected" value="">alle</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>

{
  "label": "Auswahlfeld",
  "use": "select",
  "settings": {
    "hasPleaseSelectOption": true,
    "options": [
      "Option 1",
      "Option 2",
      "Option 3"
    ]
  },
  "disabled": true
}

<!-- Auswahlfeld (ungültig) -->
<div class="form-group">
  <label class="label label--invalid form-group__label" for="form-group-f329">Auswahlfeld</label>
  <select class="select" id="form-group-f329" name="form-group-f329" aria-invalid="true" aria-errormessage="form-group-f329-error">
    <option class="select__hint" disabled="disabled" selected="selected" value="">alle</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <p class="form-group__error" id="form-group-f329-error">Das ist eine Fehlermeldung</p>
</div>

{
  "label": "Auswahlfeld",
  "use": "select",
  "settings": {
    "hasPleaseSelectOption": true,
    "options": [
      "Option 1",
      "Option 2",
      "Option 3"
    ]
  },
  "invalid": true,
  "error": "Das ist eine Fehlermeldung"
}

<!-- Radio-Button-Gruppe -->
<fieldset class="form-group">
  <legend class="label form-group__label">Eine Gruppe von Radio-Buttons</legend>
  <div class="form-group__item">
    <label class="radio" for="radio-form-group-2329-0">
      <input class="radio__input" type="radio" id="radio-form-group-2329-0" name="radio-group" /><span class="radio__indicator"></span><span class="radio__label">Option 1</span></label>
  </div>
  <div class="form-group__item">
    <label class="radio" for="radio-form-group-2329-1">
      <input class="radio__input" type="radio" checked="checked" id="radio-form-group-2329-1" name="radio-group" /><span class="radio__indicator"></span><span class="radio__label">Option 2</span></label>
  </div>
</fieldset>

{
  "label": "Eine Gruppe von Radio-Buttons",
  "group": [
    {
      "use": "radio",
      "settings": {
        "text": "Option 1",
        "name": "radio-group"
      }
    },
    {
      "use": "radio",
      "settings": {
        "text": "Option 2",
        "checked": true,
        "name": "radio-group"
      }
    }
  ]
}

<!-- Radio-Button-Gruppe mit Beschreibung -->
<fieldset class="form-group" aria-describedby="form-group-57d8-description">
  <legend class="label form-group__label">Eine Gruppe von Radio-Buttons</legend>
  <div class="form-group__item">
    <label class="radio" for="radio-form-group-57d8-0">
      <input class="radio__input" type="radio" id="radio-form-group-57d8-0" name="radio-group" /><span class="radio__indicator"></span><span class="radio__label">Option 1</span></label>
  </div>
  <div class="form-group__item">
    <label class="radio" for="radio-form-group-57d8-1">
      <input class="radio__input" type="radio" checked="checked" id="radio-form-group-57d8-1" name="radio-group" /><span class="radio__indicator"></span><span class="radio__label">Option 2</span></label>
  </div>
  <p class="form-group__description" id="form-group-57d8-description">Das ist eine Beschreibung für diese Gruppe.</p>
</fieldset>

{
  "label": "Eine Gruppe von Radio-Buttons",
  "group": [
    {
      "use": "radio",
      "settings": {
        "text": "Option 1",
        "name": "radio-group"
      }
    },
    {
      "use": "radio",
      "settings": {
        "text": "Option 2",
        "checked": true,
        "name": "radio-group"
      }
    }
  ],
  "description": "Das ist eine Beschreibung für diese Gruppe."
}

<!-- Radio-Button-Gruppe (deaktiviert) -->
<fieldset class="form-group">
  <legend class="label label--disabled form-group__label">Eine Gruppe von Radio-Buttons</legend>
  <div class="form-group__item">
    <label class="radio" for="radio-form-group-042a-0">
      <input class="radio__input" type="radio" disabled="disabled" id="radio-form-group-042a-0" name="radio-group" /><span class="radio__indicator"></span><span class="radio__label">Option 1</span></label>
  </div>
  <div class="form-group__item">
    <label class="radio" for="radio-form-group-042a-1">
      <input class="radio__input" type="radio" checked="checked" disabled="disabled" id="radio-form-group-042a-1" name="radio-group" /><span class="radio__indicator"></span><span class="radio__label">Option 2</span></label>
  </div>
</fieldset>

{
  "label": "Eine Gruppe von Radio-Buttons",
  "group": [
    {
      "use": "radio",
      "settings": {
        "text": "Option 1",
        "name": "radio-group"
      }
    },
    {
      "use": "radio",
      "settings": {
        "text": "Option 2",
        "checked": true,
        "name": "radio-group"
      }
    }
  ],
  "disabled": true
}

<!-- Radio-Button-Gruppe (ungültig) -->
<fieldset class="form-group" aria-invalid="true">
  <legend class="label label--invalid form-group__label">Eine Gruppe von Radio-Buttons</legend>
  <div class="form-group__item">
    <label class="radio" for="radio-form-group-2fdb-0">
      <input class="radio__input" type="radio" aria-invalid="true" id="radio-form-group-2fdb-0" name="radio-group" /><span class="radio__indicator"></span><span class="radio__label">Option 1</span></label>
  </div>
  <div class="form-group__item">
    <label class="radio" for="radio-form-group-2fdb-1">
      <input class="radio__input" type="radio" checked="checked" aria-invalid="true" id="radio-form-group-2fdb-1" name="radio-group" /><span class="radio__indicator"></span><span class="radio__label">Option 2</span></label>
  </div>
  <p class="form-group__error" id="form-group-2fdb-error">Das ist eine Fehlermeldung</p>
</fieldset>

{
  "label": "Eine Gruppe von Radio-Buttons",
  "group": [
    {
      "use": "radio",
      "settings": {
        "text": "Option 1",
        "name": "radio-group"
      }
    },
    {
      "use": "radio",
      "settings": {
        "text": "Option 2",
        "checked": true,
        "name": "radio-group"
      }
    }
  ],
  "invalid": true,
  "error": "Das ist eine Fehlermeldung"
}

<!-- Checkbox-Gruppe -->
<fieldset class="form-group">
  <legend class="label form-group__label">Eine Gruppe von Checkboxen</legend>
  <div class="form-group__item">
    <label class="checkbox" for="form-group-9c89-0">
      <input class="checkbox__input" type="checkbox" id="form-group-9c89-0" name="checkbox-group[]" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Option 1</span></label>
  </div>
  <div class="form-group__item">
    <label class="checkbox" for="form-group-9c89-1">
      <input class="checkbox__input" type="checkbox" checked="checked" id="form-group-9c89-1" name="checkbox-group[]" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Option 2</span></label>
  </div>
</fieldset>

{
  "label": "Eine Gruppe von Checkboxen",
  "group": [
    {
      "use": "checkbox",
      "settings": {
        "text": "Option 1",
        "name": "checkbox-group[]"
      }
    },
    {
      "use": "checkbox",
      "settings": {
        "text": "Option 2",
        "checked": true,
        "name": "checkbox-group[]"
      }
    }
  ]
}

<!-- Checkbox-Gruppe mit Beschreibung -->
<fieldset class="form-group" aria-describedby="form-group-90e1-description">
  <legend class="label form-group__label">Eine Gruppe von Checkboxen</legend>
  <div class="form-group__item">
    <label class="checkbox" for="form-group-90e1-0">
      <input class="checkbox__input" type="checkbox" id="form-group-90e1-0" name="checkbox-group[]" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Option 1</span></label>
  </div>
  <div class="form-group__item">
    <label class="checkbox" for="form-group-90e1-1">
      <input class="checkbox__input" type="checkbox" checked="checked" id="form-group-90e1-1" name="checkbox-group[]" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Option 2</span></label>
  </div>
  <p class="form-group__description" id="form-group-90e1-description">Das ist eine Beschreibung für diese Gruppe.</p>
</fieldset>

{
  "label": "Eine Gruppe von Checkboxen",
  "group": [
    {
      "use": "checkbox",
      "settings": {
        "text": "Option 1",
        "name": "checkbox-group[]"
      }
    },
    {
      "use": "checkbox",
      "settings": {
        "text": "Option 2",
        "checked": true,
        "name": "checkbox-group[]"
      }
    }
  ],
  "description": "Das ist eine Beschreibung für diese Gruppe."
}

<!-- Checkbox-Gruppe (deaktiviert) -->
<fieldset class="form-group">
  <legend class="label label--disabled form-group__label">Eine Gruppe von Checkboxen</legend>
  <div class="form-group__item">
    <label class="checkbox" for="form-group-0201-0">
      <input class="checkbox__input" type="checkbox" disabled="disabled" id="form-group-0201-0" name="checkbox-group[]" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Option 1</span></label>
  </div>
  <div class="form-group__item">
    <label class="checkbox" for="form-group-0201-1">
      <input class="checkbox__input" type="checkbox" checked="checked" disabled="disabled" id="form-group-0201-1" name="checkbox-group[]" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Option 2</span></label>
  </div>
</fieldset>

{
  "label": "Eine Gruppe von Checkboxen",
  "group": [
    {
      "use": "checkbox",
      "settings": {
        "text": "Option 1",
        "name": "checkbox-group[]"
      }
    },
    {
      "use": "checkbox",
      "settings": {
        "text": "Option 2",
        "checked": true,
        "name": "checkbox-group[]"
      }
    }
  ],
  "disabled": true
}

<!-- Checkbox-Gruppe (ungültig) -->
<fieldset class="form-group" aria-invalid="true">
  <legend class="label label--invalid form-group__label">Eine Gruppe von Checkboxen</legend>
  <div class="form-group__item">
    <label class="checkbox" for="form-group-0c3f-0">
      <input class="checkbox__input" type="checkbox" aria-invalid="true" id="form-group-0c3f-0" name="checkbox-group[]" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Option 1</span></label>
  </div>
  <div class="form-group__item">
    <label class="checkbox" for="form-group-0c3f-1">
      <input class="checkbox__input" type="checkbox" checked="checked" aria-invalid="true" id="form-group-0c3f-1" name="checkbox-group[]" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Option 2</span></label>
  </div>
  <p class="form-group__error" id="form-group-0c3f-error">Das ist eine Fehlermeldung</p>
</fieldset>

{
  "label": "Eine Gruppe von Checkboxen",
  "group": [
    {
      "use": "checkbox",
      "settings": {
        "text": "Option 1",
        "name": "checkbox-group[]"
      }
    },
    {
      "use": "checkbox",
      "settings": {
        "text": "Option 2",
        "checked": true,
        "name": "checkbox-group[]"
      }
    }
  ],
  "invalid": true,
  "error": "Das ist eine Fehlermeldung"
}

<!-- Schalter-Gruppe -->
<fieldset class="form-group">
  <legend class="label form-group__label">Eine Gruppe von Schalter</legend>
  <div class="form-group__item">
    <label class="switch" for="switch-form-group-160d-0">
      <input class="switch__input" type="checkbox" id="switch-form-group-160d-0" name="switch-group[]" /><span class="switch__indicator"><span class="switch__indicator-inner"><svg class="icon icon--check switch__indicator-icon switch__indicator-icon--check" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-check"></use>
</svg><svg class="icon icon--cross switch__indicator-icon switch__indicator-icon--cross" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-cross"></use>
</svg></span></span><span class="switch__label">Schalter 1</span></label>
  </div>
  <div class="form-group__item">
    <label class="switch" for="switch-form-group-160d-1">
      <input class="switch__input" type="checkbox" checked="checked" id="switch-form-group-160d-1" name="switch-group[]" /><span class="switch__indicator"><span class="switch__indicator-inner"><svg class="icon icon--check switch__indicator-icon switch__indicator-icon--check" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-check"></use>
</svg><svg class="icon icon--cross switch__indicator-icon switch__indicator-icon--cross" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-cross"></use>
</svg></span></span><span class="switch__label">Schalter 2</span></label>
  </div>
</fieldset>

{
  "label": "Eine Gruppe von Schalter",
  "group": [
    {
      "use": "switch",
      "settings": {
        "text": "Schalter 1",
        "name": "switch-group[]"
      }
    },
    {
      "use": "switch",
      "settings": {
        "text": "Schalter 2",
        "checked": true,
        "name": "switch-group[]"
      }
    }
  ]
}

<!-- Schalter-Gruppe mit Beschreibung -->
<fieldset class="form-group" aria-describedby="form-group-d302-description">
  <legend class="label form-group__label">Eine Gruppe von Schalter</legend>
  <div class="form-group__item">
    <label class="switch" for="switch-form-group-d302-0">
      <input class="switch__input" type="checkbox" id="switch-form-group-d302-0" name="switch-group[]" /><span class="switch__indicator"><span class="switch__indicator-inner"><svg class="icon icon--check switch__indicator-icon switch__indicator-icon--check" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-check"></use>
</svg><svg class="icon icon--cross switch__indicator-icon switch__indicator-icon--cross" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-cross"></use>
</svg></span></span><span class="switch__label">Schalter 1</span></label>
  </div>
  <div class="form-group__item">
    <label class="switch" for="switch-form-group-d302-1">
      <input class="switch__input" type="checkbox" checked="checked" id="switch-form-group-d302-1" name="switch-group[]" /><span class="switch__indicator"><span class="switch__indicator-inner"><svg class="icon icon--check switch__indicator-icon switch__indicator-icon--check" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-check"></use>
</svg><svg class="icon icon--cross switch__indicator-icon switch__indicator-icon--cross" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-cross"></use>
</svg></span></span><span class="switch__label">Schalter 2</span></label>
  </div>
  <p class="form-group__description" id="form-group-d302-description">Das ist eine Beschreibung für diese Gruppe.</p>
</fieldset>

{
  "label": "Eine Gruppe von Schalter",
  "group": [
    {
      "use": "switch",
      "settings": {
        "text": "Schalter 1",
        "name": "switch-group[]"
      }
    },
    {
      "use": "switch",
      "settings": {
        "text": "Schalter 2",
        "checked": true,
        "name": "switch-group[]"
      }
    }
  ],
  "description": "Das ist eine Beschreibung für diese Gruppe."
}

<!-- Schalter-Gruppe (deaktiviert) -->
<fieldset class="form-group">
  <legend class="label label--disabled form-group__label">Eine Gruppe von Schalter</legend>
  <div class="form-group__item">
    <label class="switch" for="switch-form-group-39e6-0">
      <input class="switch__input" type="checkbox" disabled="disabled" id="switch-form-group-39e6-0" name="switch-group[]" /><span class="switch__indicator"><span class="switch__indicator-inner"><svg class="icon icon--check switch__indicator-icon switch__indicator-icon--check" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-check"></use>
</svg><svg class="icon icon--cross switch__indicator-icon switch__indicator-icon--cross" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-cross"></use>
</svg></span></span><span class="switch__label">Schalter 1</span></label>
  </div>
  <div class="form-group__item">
    <label class="switch" for="switch-form-group-39e6-1">
      <input class="switch__input" type="checkbox" checked="checked" disabled="disabled" id="switch-form-group-39e6-1" name="switch-group[]" /><span class="switch__indicator"><span class="switch__indicator-inner"><svg class="icon icon--check switch__indicator-icon switch__indicator-icon--check" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-check"></use>
</svg><svg class="icon icon--cross switch__indicator-icon switch__indicator-icon--cross" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-cross"></use>
</svg></span></span><span class="switch__label">Schalter 2</span></label>
  </div>
</fieldset>

{
  "label": "Eine Gruppe von Schalter",
  "group": [
    {
      "use": "switch",
      "settings": {
        "text": "Schalter 1",
        "name": "switch-group[]"
      }
    },
    {
      "use": "switch",
      "settings": {
        "text": "Schalter 2",
        "checked": true,
        "name": "switch-group[]"
      }
    }
  ],
  "disabled": true
}