Form Group

Form-Group Pattern

Es ist ein Fehler aufgetreten
<div class="form-group "> <label class="control-label" for="inputID">Label <em>optional</em></label> <input id="inputID" class="form-control " placeholder=""> <span class="form-group-message">Es ist ein Fehler aufgetreten</span> </div>

Form-Group Inputs

Es ist ein Fehler aufgetreten
Es ist ein Fehler aufgetreten
Es ist ein Fehler aufgetreten
Es ist ein Fehler aufgetreten
Es ist ein Fehler aufgetreten
Es ist ein Fehler aufgetreten
Es ist ein Fehler aufgetreten
Es ist ein Fehler aufgetreten
Es ist ein Fehler aufgetreten
Es ist ein Fehler aufgetreten
<label class="mbx"> Radio-Group-Label</label> <div class="form-inline"> <div class="form-group "> <input type="radio" id="myRadio1" name="radioGroup" /> <label for="myRadio1"> <span> <!-- --> </span> Radio 1</label> <span class="form-group-message">Es ist ein Fehler aufgetreten</span> </div> <div class="form-group "> <input type="radio" id="myRadio2" name="radioGroup" /> <label for="myRadio2"> <span> <!-- --> </span> Radio 2</label> <span class="form-group-message">Es ist ein Fehler aufgetreten</span> </div> </div> <div class="form-group "> <label class="control-label" for="formText">Label </label> <input id="formText" class="form-control " placeholder=""> <span class="form-group-message">Es ist ein Fehler aufgetreten</span> </div> <div class="form-inline"> <div class="form-group w20"> <label class="control-label" for="formText">Label </label> <input id="formText" class="form-control " placeholder=""> <span class="form-group-message">Es ist ein Fehler aufgetreten</span> </div> <div class="form-group w80"> <label class="control-label" for="formText">Label </label> <input id="formText" class="form-control " placeholder=""> <span class="form-group-message">Es ist ein Fehler aufgetreten</span> </div> </div> <div class="form-inline"> <div class="form-group w80"> <label class="control-label" for="formText">Label </label> <input id="formText" class="form-control " placeholder=""> <span class="form-group-message">Es ist ein Fehler aufgetreten</span> </div> <div class="form-group w20"> <label class="control-label" for="formText">Label </label> <input id="formText" class="form-control " placeholder=""> <span class="form-group-message">Es ist ein Fehler aufgetreten</span> </div> </div> <div class="form-group "> <label class="control-label" for="formText">Label </label> <select class="form-control selectOption " id="formText"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <span class="form-group-message">Es ist ein Fehler aufgetreten</span> </div> <div class="form-group "> <div class="form-group form-checkbox "> <input type="checkbox" id="lorem-ipsum-dolor-sit-amet-officia-deserunt-mollit-anim-id-est-laborum" name="checkboxGroup" /> <label for="lorem-ipsum-dolor-sit-amet-officia-deserunt-mollit-anim-id-est-laborum"> <span> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#check"></use> </svg> </span> <span class="checkbox-label"> Lorem ipsum dolor sit amet officia deserunt mollit anim id est laborum. </span> </label> </div> <span class="form-group-message">Es ist ein Fehler aufgetreten</span> </div> <div class="form-group "> <label class="control-label" for="">Label </label> <textarea class="form-control " rows="10" placeholder=""></textarea> <span class="form-group-message">Es ist ein Fehler aufgetreten</span> </div>

Form-Group States

Es ist ein Fehler aufgetreten
Es ist ein Fehler aufgetreten
Es ist ein Fehler aufgetreten
Es ist ein Fehler aufgetreten
Es ist ein Fehler aufgetreten
<label class="mbx"> Radio-Group-Label</label> <div class="form-inline"> <div class="form-group has-error"> <input type="radio" id="myRadio1" name="radioGroup" /> <label for="myRadio1"> <span> <!-- --> </span> Radio 1</label> <span class="form-group-message">Es ist ein Fehler aufgetreten</span> </div> </div> <div class="form-group has-error"> <label class="control-label" for="formText">Label </label> <input id="formText" class="form-control " placeholder=""> <span class="form-group-message">Es ist ein Fehler aufgetreten</span> </div> <div class="form-group has-error"> <label class="control-label" for="formText">Label </label> <select class="form-control selectOption " id="formText"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <span class="form-group-message">Es ist ein Fehler aufgetreten</span> </div> <div class="form-group has-error"> <div class="form-group form-checkbox "> <input type="checkbox" id="lorem-ipsum-dolor-sit-amet-officia-deserunt-mollit-anim-id-est-laborum" name="checkboxGroup" /> <label for="lorem-ipsum-dolor-sit-amet-officia-deserunt-mollit-anim-id-est-laborum"> <span> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#check"></use> </svg> </span> <span class="checkbox-label"> Lorem ipsum dolor sit amet officia deserunt mollit anim id est laborum. </span> </label> </div> <span class="form-group-message">Es ist ein Fehler aufgetreten</span> </div> <div class="form-group has-error"> <label class="control-label" for="">Label </label> <textarea class="form-control " rows="10" placeholder=""></textarea> <span class="form-group-message">Es ist ein Fehler aufgetreten</span> </div>