<div class="form-group"><label class="label form-group__label" for="form-group-33ae">Label</label>
  <div class="form-group__input"><input class="input" id="form-group-33ae" type="text" placeholder="Placeholdertext" /></div>
</div>

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

<div class="form-group"><label class="label label--invalid form-group__label" for="form-group-f2cd">Label</label>
  <div class="form-group__input"><input class="input" id="form-group-f2cd" type="text" placeholder="Placeholdertext" aria-invalid="true" aria-errormessage="form-group-f2cd-error" /></div>
  <p class="form-group__error" id="form-group-f2cd-error">Das ist eine Fehlermeldung.</p>
</div>

{
  "label": {
    "label": "Label"
  },
  "invalid": true,
  "error": "Das ist eine Fehlermeldung.",
  "settings": {
    "type": "text"
  }
}

<div class="form-group"><label class="label form-group__label" for="form-group-8072">Label</label>
  <div class="form-group__input"><input class="input" id="form-group-8072" type="text" placeholder="Placeholdertext" /></div>
  <p class="form-group__info">Das ist eine Infotext.</p>
</div>

{
  "label": {
    "label": "Label"
  },
  "info": "Das ist eine Infotext.",
  "settings": {
    "type": "text"
  }
}

<div class="form-group"><label class="label label--disabled form-group__label" for="form-group-d72f">Label</label>
  <div class="form-group__input"><input class="input" id="form-group-d72f" type="text" placeholder="Placeholdertext" disabled="disabled" /></div>
</div>

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

<div class="form-group"><label class="label form-group__label" for="form-group-4b45">Label Textblock</label>
  <div class="form-group__input"><textarea class="input input--textarea" id="form-group-4b45" type="textarea" placeholder="Placeholdertext"></textarea></div>
</div>

{
  "label": {
    "label": "Label Textblock"
  },
  "settings": {
    "type": "textarea"
  }
}

<div class="form-group"><label class="label label--invalid form-group__label" for="form-group-f694">Label Textblock</label>
  <div class="form-group__input"><textarea class="input input--textarea" id="form-group-f694" type="textarea" placeholder="Placeholdertext" aria-invalid="true" aria-errormessage="form-group-f694-error"></textarea></div>
  <p class="form-group__error" id="form-group-f694-error">Das ist eine Fehlermeldung.</p>
</div>

{
  "label": {
    "label": "Label Textblock"
  },
  "invalid": true,
  "error": "Das ist eine Fehlermeldung.",
  "settings": {
    "type": "textarea"
  }
}

<div class="form-group"><label class="label label--disabled form-group__label" for="form-group-9688">Label Textblock</label>
  <div class="form-group__input"><textarea class="input input--textarea" id="form-group-9688" type="textarea" disabled="disabled"></textarea></div>
</div>

{
  "label": {
    "label": "Label Textblock"
  },
  "disabled": true,
  "settings": {
    "type": "textarea",
    "placeholder": null
  }
}

<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-21dc-0"><input class="radio__input" type="radio" id="radio-form-group-21dc-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-21dc-1"><input class="radio__input" type="radio" checked="checked" id="radio-form-group-21dc-1" name="radio-group" /><span class="radio__indicator"></span><span class="radio__label">Option 2</span></label></div>
</fieldset>

{
  "label": {
    "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"
      }
    }
  ]
}

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

{
  "groupHorizontal": true,
  "label": {
    "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"
      }
    }
  ]
}

<fieldset class="form-group">
  <legend class="label form-group__label">Eine Gruppe von Checkboxen</legend>
  <div class="form-group__item"><label class="checkbox" for="checkbox-form-group-e968-0"><input class="checkbox__input" type="checkbox" id="checkbox-form-group-e968-0" name="checkbox-group" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <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="checkbox-form-group-e968-1"><input class="checkbox__input" type="checkbox" checked="checked" id="checkbox-form-group-e968-1" name="checkbox-group" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Option 2</span></label></div>
</fieldset>

{
  "label": {
    "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"
      }
    }
  ]
}

<div class="form-group"><label class="label form-group__label" for="form-group-2662">Label</label>
  <div class="form-group__input"><select class="select" id="form-group-2662">
      <option class="select__hint" disabled="disabled" selected="selected" value="">Bitte Auswählen</option>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select></div>
</div>

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

<div class="form-group"><label class="label label--invalid form-group__label" for="form-group-add9">Label</label>
  <div class="form-group__input"><select class="select" id="form-group-add9" aria-invalid="true" aria-errormessage="form-group-add9-error">
      <option class="select__hint" disabled="disabled" selected="selected" value="">Bitte Auswählen</option>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select></div>
  <p class="form-group__error" id="form-group-add9-error">Das ist eine Fehlermeldung</p>
</div>

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