Switches are special checkboxes used for binary states such as on / off

Off On

Off On

Off On

For material design 3 switches, just add md3 class to the switch element.

Off On

Off On

Off On

Off On

  <!-- Switch -->
  <div class="switch">
    <label>
      Off
      <input type="checkbox">
      <span class="lever"></span>
      On
    </label>
  </div>

  <!-- Disabled Switch -->
  <div class="switch">
    <label>
      Off
      <input disabled type="checkbox">
      <span class="lever"></span>
      On
    </label>
  </div>

  <!-- Switch Material Design 3 -->
  <div class="switch md3">
    <label>
      Off
      <input type="checkbox">
      <span class="lever"></span>
      On
    </label>
  </div>

  <!-- Switch Material Design 3 with icon -->
  <div class="switch md3 with-icon">
    <label>
      Off
      <input type="checkbox">
      <span class="lever"></span>
      On
    </label>
  </div>