Checkbox @checkbox
Checkbox @checkbox--unchecked
<!-- Checkbox -->
<label class="checkbox" for="a">
<input class="checkbox__input" type="checkbox" id="a" name="checkbox-a" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Checkbox</span></label>{
"text": "Checkbox",
"checked": null,
"id": "a"
}
Checkbox (ausgewählt) @checkbox--checked
<!-- Checkbox (ausgewählt) -->
<label class="checkbox">
<input class="checkbox__input" type="checkbox" checked="checked" name="checkbox-8e66" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Checkbox</span></label>{
"text": "Checkbox",
"checked": true
}
Checkbox (deaktiviert) @checkbox--unchecked-disabled
<!-- Checkbox (deaktiviert) -->
<label class="checkbox">
<input class="checkbox__input" type="checkbox" disabled="disabled" name="checkbox-aff8" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Checkbox</span></label>{
"text": "Checkbox",
"checked": null,
"disabled": true
}
Checkbox (deaktiviert, ausgewählt) @checkbox--checked-disabled
<!-- Checkbox (deaktiviert, ausgewählt) -->
<label class="checkbox">
<input class="checkbox__input" type="checkbox" checked="checked" disabled="disabled" name="checkbox-5efd" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Checkbox</span></label>{
"text": "Checkbox",
"checked": true,
"disabled": true
}
Checkbox (ungültig) @checkbox--unchecked-invalid
<!-- Checkbox (ungültig) -->
<label class="checkbox">
<input class="checkbox__input" type="checkbox" aria-invalid="true" name="checkbox-db62" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Checkbox</span></label>{
"text": "Checkbox",
"checked": null,
"invalid": true
}
Checkbox (ungültig, ausgewählt) @checkbox--checked-invalid
<!-- Checkbox (ungültig, ausgewählt) -->
<label class="checkbox">
<input class="checkbox__input" type="checkbox" checked="checked" aria-invalid="true" name="checkbox-8031" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Checkbox</span></label>{
"text": "Checkbox",
"checked": true,
"invalid": true
}