سوئیچ کننده

      <div class="field is-grouped">
          <div class="control">
              <label class="form-switch">
                  <input type="checkbox" class="is-switch">
                  <i></i>
              </label>
          </div>
      
          <div class="control">
              <label class="form-switch is-primary">
                  <input type="checkbox" class="is-switch" checked>
                  <i></i>
              </label>
          </div>
      
          <div class="control">
              <label class="form-switch is-success">
                  <input type="checkbox" class="is-switch" checked>
                  <i></i>
              </label>
          </div>
      
          <div class="control">
              <label class="form-switch is-info">
                  <input type="checkbox" class="is-switch" checked>
                  <i></i>
              </label>
          </div>
      
          <div class="control">
              <label class="form-switch is-warning">
                  <input type="checkbox" class="is-switch" checked>
                  <i></i>
              </label>
          </div>
      
          <div class="control">
              <label class="form-switch is-danger">
                  <input type="checkbox" class="is-switch" checked>
                  <i></i>
              </label>
          </div>
      </div>
      

      <div class="field is-grouped">
          <div class="control">
              <div class="thin-switch">
                  <input id="thin-switch-1" class="input" type="checkbox" />
                  <label for="thin-switch-1" class="slider"></label>
              </div>
          </div>
      
          <div class="control">
              <div class="thin-switch is-primary">
                  <input id="thin-switch-2" class="input" type="checkbox" checked />
                  <label for="thin-switch-2" class="slider"></label>
              </div>
          </div>
      
          <div class="control">
              <div class="thin-switch is-success">
                  <input id="thin-switch-3" class="input" type="checkbox" checked />
                  <label for="thin-switch-3" class="slider"></label>
              </div>
          </div>
      
          <div class="control">
              <div class="thin-switch is-info">
                  <input id="thin-switch-4" class="input" type="checkbox" checked />
                  <label for="thin-switch-4" class="slider"></label>
              </div>
          </div>
      
          <div class="control">
              <div class="thin-switch is-warning">
                  <input id="thin-switch-5" class="input" type="checkbox" checked />
                  <label for="thin-switch-5" class="slider"></label>
              </div>
          </div>
      
          <div class="control">
              <div class="thin-switch is-danger">
                  <input id="thin-switch-6" class="input" type="checkbox" checked />
                  <label for="thin-switch-6" class="slider"></label>
              </div>
          </div>
      </div>
      

      <div class="switch-block">
          <label class="form-switch">
              <input type="checkbox" class="is-switch" checked>
              <i></i>
          </label>
          <div class="text">
              <span>Some option</span>
          </div>
      </div>
      

      <div class="thin-switch-block">
          <div class="thin-switch">
              <input id="thin-switch-7" class="input" type="checkbox" checked />
              <label for="thin-switch-7" class="slider"></label>
          </div>
          <div class="text">
              <span>Some option</span>
          </div>
      </div>