<div class="form-group"><label class="label form-group__label" for="form-group-932b">Label</label>
  <div class="form-group__input"><input class="input" id="form-group-932b" 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-485a">Label</label>
  <div class="form-group__input"><input class="input" id="form-group-485a" type="text" placeholder="Placeholdertext" aria-invalid="true" aria-errormessage="form-group-485a-error" /></div>
  <p class="form-group__error" id="form-group-485a-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-ecec">Label</label>
  <div class="form-group__input"><input class="input" id="form-group-ecec" 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-0852">Label</label>
  <div class="form-group__input"><input class="input" id="form-group-0852" 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-de79">Label Textblock</label>
  <div class="form-group__input"><textarea class="input input--textarea" id="form-group-de79" 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-539d">Label Textblock</label>
  <div class="form-group__input"><textarea class="input input--textarea" id="form-group-539d" type="textarea" placeholder="Placeholdertext" aria-invalid="true" aria-errormessage="form-group-539d-error"></textarea></div>
  <p class="form-group__error" id="form-group-539d-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-336c">Label Textblock</label>
  <div class="form-group__input"><textarea class="input input--textarea" id="form-group-336c" 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-0dbd-0"><input class="radio__input" type="radio" id="radio-form-group-0dbd-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-0dbd-1"><input class="radio__input" type="radio" checked="checked" id="radio-form-group-0dbd-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-cca7-0"><input class="radio__input" type="radio" id="radio-form-group-cca7-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-cca7-1"><input class="radio__input" type="radio" checked="checked" id="radio-form-group-cca7-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-95df-0"><input class="checkbox__input" type="checkbox" id="checkbox-form-group-95df-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-95df-1"><input class="checkbox__input" type="checkbox" checked="checked" id="checkbox-form-group-95df-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-6cef">Label</label>
  <div class="form-group__input"><select class="select" id="form-group-6cef">
      <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-5425">Label</label>
  <div class="form-group__input"><select class="select" id="form-group-5425" aria-invalid="true" aria-errormessage="form-group-5425-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-5425-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"
}