Switch v2

Styles for radio-/checkbox-elements

Toggle Variant

Markup toggle Variant

<div class="form-group">
    <label class="field-label"></label>
    <div class="toggle-variant switch v2">
        <input id="s3" name="s3" type="checkbox" checked>
        <label for="s3"></label>
    </div>
</div>

Examples Toggle Variant

roundings:

Without/&.square

&.rounded-light

&.rounded

&.pill

&.round

sizing:

Normal

&.tiny

&.small

&.medium

Yes-No Variant

Markup yesno Variant

<div class="form-group">
    <div class="yesno-variant switch v2">
        <input id="s4" name="s3" type="checkbox" checked>
        <label for="s4" data-on="Yes" data-off="No"></label>
    </div>
</div>

Examples Yes-No Variant

roundings:

&.square/Ohne

&.rounded-light

&.rounded

&.pill

&.round

sizing: