Components Toggle Switch

A toggle switch is used to turn an option on or off.

                    
                    <div class="ds-switch-wraper relative">
        <label class="ds-switch">
            <span title="" class="ds-switch-label">Audio</span>
            <input  type="checkbox" class="ds-switch-checkbox" checked="checked" />
            <span class="ds-switch-slider ds-round"></span>
                            
        </label>
    </div>
                    
                
                    
                    <div class="ds-switch-wraper relative mt5">
        <label class="ds-switch">
            <span title="" class="ds-switch-label">Video</span>
            <input  type="checkbox" class="ds-switch-checkbox" >
            <span class="ds-switch-slider ds-round"></span>
        </label>
    </div>
                    
                

Guidelines

  • Use toggle buttons when an action is required without any confirmation process.
  • Toggle buttons must have short labels.
  • Do not change the label when the toggle button is switched between on and off.