Toggle Switch

Bootstrap 5 Toggle Switch component

A switch is a simple component used for activating one of two predefined options. Commonly used as an on/off button.

Basic example

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Consider using role="switch" to more accurately convey the nature of the control to assistive technologies that support this role. In older assistive technologies, it will simply be announced as a regular checkbox as a fallback. Switches also support the disabled attribute.




Edit in sandbox 
        
            
          <!-- Default switch -->
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" />
            <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
          </div>

          <!-- Checked switch -->
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked />
            <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
          </div>

          <!-- Default disabled switch -->
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled />
            <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
          </div>

          <!-- Checked disabled switch -->
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled />
            <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
          </div>