Form Group @form-group
Eingabefeld @form-group--input
<div class="form-group"><label class="label form-group__label" for="form-group-d36f">Label</label>
<div class="form-group__input"><input class="input" id="form-group-d36f" type="text" placeholder="Placeholdertext" /></div>
</div>{
"label": {
"label": "Label"
},
"settings": {
"type": "text"
}
}
Eingabefeld (ungültig) @form-group--input-invalid
<div class="form-group"><label class="label label--invalid form-group__label" for="form-group-edb2">Label</label>
<div class="form-group__input"><input class="input" id="form-group-edb2" type="text" placeholder="Placeholdertext" aria-invalid="true" aria-errormessage="form-group-edb2-error" /></div>
<p class="form-group__error" id="form-group-edb2-error">Das ist eine Fehlermeldung.</p>
</div>{
"label": {
"label": "Label"
},
"invalid": true,
"error": "Das ist eine Fehlermeldung.",
"settings": {
"type": "text"
}
}
Eingabefeld (mit Infotext) @form-group--input-info
<div class="form-group"><label class="label form-group__label" for="form-group-d744">Label</label>
<div class="form-group__input"><input class="input" id="form-group-d744" 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"
}
}
Eingabefeld (deaktiviert) @form-group--input-disabled
<div class="form-group"><label class="label label--disabled form-group__label" for="form-group-34ba">Label</label>
<div class="form-group__input"><input class="input" id="form-group-34ba" type="text" placeholder="Placeholdertext" disabled="disabled" /></div>
</div>{
"label": {
"label": "Label"
},
"disabled": true,
"settings": {
"type": "text"
}
}
Textblock @form-group--textarea
<div class="form-group"><label class="label form-group__label" for="form-group-081a">Label Textblock</label>
<div class="form-group__input"><textarea class="input input--textarea" id="form-group-081a" type="textarea" placeholder="Placeholdertext"></textarea></div>
</div>{
"label": {
"label": "Label Textblock"
},
"settings": {
"type": "textarea"
}
}
Textblock (ungültig) @form-group--textarea-invalid
<div class="form-group"><label class="label label--invalid form-group__label" for="form-group-abdd">Label Textblock</label>
<div class="form-group__input"><textarea class="input input--textarea" id="form-group-abdd" type="textarea" placeholder="Placeholdertext" aria-invalid="true" aria-errormessage="form-group-abdd-error"></textarea></div>
<p class="form-group__error" id="form-group-abdd-error">Das ist eine Fehlermeldung.</p>
</div>{
"label": {
"label": "Label Textblock"
},
"invalid": true,
"error": "Das ist eine Fehlermeldung.",
"settings": {
"type": "textarea"
}
}
Textblock (deaktiviert) @form-group--textarea-disabled
<div class="form-group"><label class="label label--disabled form-group__label" for="form-group-ce16">Label Textblock</label>
<div class="form-group__input"><textarea class="input input--textarea" id="form-group-ce16" type="textarea" disabled="disabled"></textarea></div>
</div>{
"label": {
"label": "Label Textblock"
},
"disabled": true,
"settings": {
"type": "textarea",
"placeholder": null
}
}
Radio-Button-Gruppe @form-group--radio-group
<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-8084-0"><input class="radio__input" type="radio" id="radio-form-group-8084-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-8084-1"><input class="radio__input" type="radio" checked="checked" id="radio-form-group-8084-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"
}
}
]
}
Radio-Button-Gruppe Horizontal @form-group--radio-group-horizontal
<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-2e4f-0"><input class="radio__input" type="radio" id="radio-form-group-2e4f-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-2e4f-1"><input class="radio__input" type="radio" checked="checked" id="radio-form-group-2e4f-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"
}
}
]
}
Checkbox-Gruppe @form-group--checkbox-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-6d3a-0"><input class="checkbox__input" type="checkbox" id="checkbox-form-group-6d3a-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-6d3a-1"><input class="checkbox__input" type="checkbox" checked="checked" id="checkbox-form-group-6d3a-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"
}
}
]
}
Auswahlfeld @form-group--select
<div class="form-group"><label class="label form-group__label" for="form-group-6d55">Label</label>
<div class="form-group__input"><select class="select" id="form-group-6d55">
<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"
]
}
}
Auswahlfeld (ungültig) @form-group--select-invalid
<div class="form-group"><label class="label label--invalid form-group__label" for="form-group-5eec">Label</label>
<div class="form-group__input"><select class="select" id="form-group-5eec" aria-invalid="true" aria-errormessage="form-group-5eec-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-5eec-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"
}
Label (ungültig) @form-group--select-disabled
<div class="form-group"><label class="label label--disabled form-group__label" for="form-group-8c3c">Label</label>
<div class="form-group__input"><select class="select" id="form-group-8c3c" disabled="disabled">
<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"
]
},
"disabled": true
}