Form Checkbox Switch

<!-- Default -->
<div class="form__field form__field--switch">
    <input type="checkbox" class="form-checkbox" id="form__example__checkbox--switch" name="example-checkbox--switch" />
    <label for="form__example__checkbox--switch" class="form__label"><i></i><span>Eos Explicabo Eveniet</span></label>
</div>

<!-- Green -->
<div class="form__field form__field--switch form__field--switch--green">
    <input type="checkbox" class="form-checkbox" id="form__example__checkbox--green" name="example-checkbox--green" />
    <label for="form__example__checkbox--green" class="form__label"><i></i><span>Eos Explicabo Eveniet</span></label>
</div>

<!-- Large -->
<div class="form__field form__field--switch form__field--switch--large">
    <input type="checkbox" class="form-checkbox" id="form__example__checkbox--large" name="example-checkbox--large" />
    <label for="form__example__checkbox--large" class="form__label"><i></i><span>Eos Explicabo Eveniet</span></label>
</div>

<!-- Large Green -->
<div class="form__field form__field--switch form__field--switch--green form__field--switch--large">
    <input type="checkbox" class="form-checkbox" id="form__example__checkbox--green--large" name="example-checkbox--large" />
    <label for="form__example__checkbox--green--large" class="form__label"><i></i><span>Eos Explicabo Eveniet</span></label>
</div>

<!-- Reverse -->
<div class="form__field form__field--switch form__field--switch--reverse">
    <input type="checkbox" class="form-checkbox" id="form__example__checkbox--reverse" name="example-checkbox--reverse" />
    <label for="form__example__checkbox--reverse" class="form__label"><i></i><span>Eos Explicabo Eveniet</span></label>
</div>

<!-- Reversed (Green) -->
<div class="form__field form__field--switch form__field--switch--reverse form__field--switch--green">
    <input type="checkbox" class="form-checkbox" id="form__example__checkbox--green--reverse" name="example-checkbox--green--reverse" />
    <label for="form__example__checkbox--green--reverse" class="form__label"><i></i><span>Eos Explicabo Eveniet</span></label>
</div>

<!-- Reverse (Large) -->
<div class="form__field form__field--switch form__field--switch--reverse form__field--switch--large">
    <input type="checkbox" class="form-checkbox" id="form__example__checkbox--reverse--large" name="example-checkbox--reverse--large" />
    <label for="form__example__checkbox--reverse--large" class="form__label"><i></i><span>Eos Explicabo Eveniet</span></label>
</div>

<!-- Reversed (Large Green) -->
<div class="form__field form__field--switch form__field--switch--reverse form__field--switch--green form__field--switch--large">
    <input type="checkbox" class="form-checkbox" id="form__example__checkbox--green--reverse--large" name="example-checkbox--green--reverse--large" />
    <label for="form__example__checkbox--green--reverse--large" class="form__label"><i></i><span>Eos Explicabo Eveniet</span></label>
</div>

<!-- Standalone -->
<div class="form__field form__field--switch form__field--switch--standalone">
    <input type="checkbox" class="form-checkbox" id="form__example__checkbox--standalone" name="example-checkbox--standalone" />
    <label for="form__example__checkbox--standalone" class="form__label"><i></i><span>Eos Explicabo Eveniet</span></label>
</div>

<!-- Standalone (Green) -->
<div class="form__field form__field--switch form__field--switch--standalone form__field--switch--green">
    <input type="checkbox" class="form-checkbox" id="form__example__checkbox--standalone--green" name="example-checkbox--standalone--green" />
    <label for="form__example__checkbox--standalone--green" class="form__label"><i></i><span>Eos Explicabo Eveniet</span></label>
</div>

<!-- Standalone (Large) -->
<div class="form__field form__field--switch form__field--switch--standalone form__field--switch--large">
    <input type="checkbox" class="form-checkbox" id="form__example__checkbox--standalone--large" name="example-checkbox--standalone--large" />
    <label for="form__example__checkbox--standalone--large" class="form__label"><i></i><span>Eos Explicabo Eveniet</span></label>
</div>

<!-- Standalone (Green Large) -->
<div class="form__field form__field--switch form__field--switch--standalone form__field--switch--green form__field--switch--large">
    <input type="checkbox" class="form-checkbox" id="form__example__checkbox--standalone--green-large" name="example-checkbox--standalone--green-large" />
    <label for="form__example__checkbox--standalone--green-large" class="form__label"><i></i><span>Eos Explicabo Eveniet</span></label>
</div>