Schalter @switch
Schalter aus @switch--off
<!-- Schalter aus -->
<label class="switch" for="switch-cc6b">
<input class="switch__input" type="checkbox" id="switch-cc6b" name="switch-cc6b" /><span class="switch__indicator"><span class="switch__indicator-inner"><svg class="icon icon--check switch__indicator-icon switch__indicator-icon--check" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-check"></use>
</svg><svg class="icon icon--cross switch__indicator-icon switch__indicator-icon--cross" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-cross"></use>
</svg></span></span><span class="switch__label">Schalter</span></label>{
"text": "Schalter",
"checked": null
}
Schalter an @switch--on
<!-- Schalter an -->
<label class="switch" for="switch-d84a">
<input class="switch__input" type="checkbox" checked="checked" id="switch-d84a" name="switch-d84a" /><span class="switch__indicator"><span class="switch__indicator-inner"><svg class="icon icon--check switch__indicator-icon switch__indicator-icon--check" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-check"></use>
</svg><svg class="icon icon--cross switch__indicator-icon switch__indicator-icon--cross" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-cross"></use>
</svg></span></span><span class="switch__label">Schalter</span></label>{
"text": "Schalter",
"checked": true
}
Schalter aus (deaktiviert) @switch--off-disabled
<!-- Schalter aus (deaktiviert) -->
<label class="switch" for="switch-e54f">
<input class="switch__input" type="checkbox" disabled="disabled" id="switch-e54f" name="switch-e54f" /><span class="switch__indicator"><span class="switch__indicator-inner"><svg class="icon icon--check switch__indicator-icon switch__indicator-icon--check" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-check"></use>
</svg><svg class="icon icon--cross switch__indicator-icon switch__indicator-icon--cross" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-cross"></use>
</svg></span></span><span class="switch__label">Schalter</span></label>{
"text": "Schalter",
"checked": null,
"disabled": true
}
Schalter an (deaktiviert) @switch--on-disabled
<!-- Schalter an (deaktiviert) -->
<label class="switch" for="switch-e479">
<input class="switch__input" type="checkbox" checked="checked" disabled="disabled" id="switch-e479" name="switch-e479" /><span class="switch__indicator"><span class="switch__indicator-inner"><svg class="icon icon--check switch__indicator-icon switch__indicator-icon--check" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-check"></use>
</svg><svg class="icon icon--cross switch__indicator-icon switch__indicator-icon--cross" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-cross"></use>
</svg></span></span><span class="switch__label">Schalter</span></label>{
"text": "Schalter",
"checked": true,
"disabled": true
}
Schalter aus (ungültig) @switch--off-invalid
<!-- Schalter aus (ungültig) -->
<label class="switch" for="switch-aa8c">
<input class="switch__input" type="checkbox" aria-invalid="true" id="switch-aa8c" name="switch-aa8c" /><span class="switch__indicator"><span class="switch__indicator-inner"><svg class="icon icon--check switch__indicator-icon switch__indicator-icon--check" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-check"></use>
</svg><svg class="icon icon--cross switch__indicator-icon switch__indicator-icon--cross" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-cross"></use>
</svg></span></span><span class="switch__label">Schalter</span></label>{
"text": "Schalter",
"checked": null,
"invalid": true
}
Schalter an (ungültig) @switch--on-invalid
<!-- Schalter an (ungültig) -->
<label class="switch" for="switch-571c">
<input class="switch__input" type="checkbox" checked="checked" aria-invalid="true" id="switch-571c" name="switch-571c" /><span class="switch__indicator"><span class="switch__indicator-inner"><svg class="icon icon--check switch__indicator-icon switch__indicator-icon--check" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-check"></use>
</svg><svg class="icon icon--cross switch__indicator-icon switch__indicator-icon--cross" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-cross"></use>
</svg></span></span><span class="switch__label">Schalter</span></label>{
"text": "Schalter",
"checked": true,
"invalid": true
}