showcar-ui/src/06-components/atoms/input/docs/toggle.html

Showcar-ui is the pattern library that is used to build the frontend of AutoScout24. It provides CSS classes, custom elements and components.

<input type="checkbox" id="switched-on" class="sc-toggle-checkbox" checked="true"><label class="sc-toggle" for="switched-on"><div class="sc-toggle-background"><as24-icon type="hook"></as24-icon></div></label>
<input type="checkbox" id="switched-off" class="sc-toggle-checkbox"><label class="sc-toggle" for="switched-off"><div class="sc-toggle-background"><as24-icon type="hook"></as24-icon></div></label>
<input type="checkbox" id="switched-on-disabled" class="sc-toggle-checkbox" checked="true" disabled><label class="sc-toggle" for="switched-on-disabled"><div class="sc-toggle-background"><as24-icon type="hook"></as24-icon></div></label>
<input type="checkbox" id="switched-off-disabled" class="sc-toggle-checkbox" disabled><label class="sc-toggle" for="switched-off-disabled"><div class="sc-toggle-background"><as24-icon type="hook"></as24-icon></div></label>
<input type="checkbox" id="switched-on-loading" class="sc-toggle-checkbox loading" checked="true"><label class="sc-toggle" for="switched-off-disabled"><div class="sc-toggle-background"><as24-icon type="hook"></as24-icon></div></label>

<hr>

<label class="sc-label-left">Label left for toggles</label>
<input type="checkbox" id="switch-with-label" class="sc-toggle-checkbox" checked="true"><label class="sc-toggle" for="switch-with-label"><div class="sc-toggle-background"><as24-icon type="hook"></as24-icon></div></label>

<style>
    #toggle .sample hr {
        margin-top: 40px;
        margin-bottom: 40px;
    }
</style>