Form Group @form-group
Eingabefeld @form-group--input
<div class="form-group"><label class="label form-group__label" for="form-group-1d74">Label</label>
<div class="form-group__input"><input class="input" id="form-group-1d74" 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-0c8c">Label</label>
<div class="form-group__input"><input class="input" id="form-group-0c8c" type="text" placeholder="Placeholdertext" aria-invalid="true" aria-errormessage="form-group-0c8c-error" /></div>
<p class="form-group__error" id="form-group-0c8c-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-81ee">Label</label>
<div class="form-group__input"><input class="input" id="form-group-81ee" 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-c5c7">Label</label>
<div class="form-group__input"><input class="input" id="form-group-c5c7" 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-660c">Label Textblock</label>
<div class="form-group__input"><textarea class="input input--textarea" id="form-group-660c" 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-581e">Label Textblock</label>
<div class="form-group__input"><textarea class="input input--textarea" id="form-group-581e" type="textarea" placeholder="Placeholdertext" aria-invalid="true" aria-errormessage="form-group-581e-error"></textarea></div>
<p class="form-group__error" id="form-group-581e-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-6001">Label Textblock</label>
<div class="form-group__input"><textarea class="input input--textarea" id="form-group-6001" 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-0a8a-0"><input class="radio__input" type="radio" id="radio-form-group-0a8a-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-0a8a-1"><input class="radio__input" type="radio" checked="checked" id="radio-form-group-0a8a-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-5d77-0"><input class="radio__input" type="radio" id="radio-form-group-5d77-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-5d77-1"><input class="radio__input" type="radio" checked="checked" id="radio-form-group-5d77-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-23bb-0"><input class="checkbox__input" type="checkbox" id="checkbox-form-group-23bb-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-23bb-1"><input class="checkbox__input" type="checkbox" checked="checked" id="checkbox-form-group-23bb-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-d9fa">Label</label>
<div class="form-group__input"><select class="select" id="form-group-d9fa">
<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-43ca">Label</label>
<div class="form-group__input"><select class="select" id="form-group-43ca" aria-invalid="true" aria-errormessage="form-group-43ca-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-43ca-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-e6a1">Label</label>
<div class="form-group__input"><select class="select" id="form-group-e6a1" 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
}