Toggle switch for checkbox form input

Inspect the full details and code of a selected snippet

<div class="uk-flex-1 uk-flex">
  <div class="uk-container uk-container-small uk-flex-1 uk-flex uk-flex-column uk-margin-medium-top uk-margin-medium-bottom">
    <div class="uk-flex-1 uk-flex uk-flex-column uk-flex-center">
      <div class="uk-width-1-1">
        <div class="uk-text-small uk-text-muted uk-text-uppercase uk-text-semibold uk-margin-small-bottom">Toggle switch for checkbox form input</div>
        <div class="uk-card uk-card-default uk-box-shadow-remove uk-padding-small uk-border-rounded">
          <div class="uk-margin-small-top uk-text-bold">Default UIkit checkbox</div>
          <div class="uk-placeholder uk-padding-small uk-margin-remove-top">
            <div class="uk-child-width-1-3@m uk-child-width-1-2@s" uk-grid>
              <div>
                <div class="uk-margin-small-bottom">Label cursor fix:</div>
                <label class="uk-form-label" for="checkbox-1"> <input id="checkbox-1" class="uk-checkbox" type="checkbox" checked /> Check me </label>
              </div>
            </div>
          </div>
          <div class="uk-margin-small-top uk-text-bold">Toggle switch</div>
          <div class="uk-placeholder uk-padding-small uk-margin-remove-top">
            <div class="uk-child-width-1-4@m uk-child-width-1-2@s" uk-grid>
              <div>
                <div class="uk-margin-small-bottom"><span class="uk-text-muted">Accept</span> checkbox:</div>
                <label class="uk-form-label" for="checkbox-8">
                  <input id="checkbox-8" class="uk-checkbox" type="checkbox" uk-switch="type: accept" />
                </label>
              </div>
              <div>
                <div class="uk-margin-small-bottom"><span class="uk-text-default">Default</span> checkbox:</div>
                <label class="uk-form-label" for="checkbox-2">
                  <input id="checkbox-2" class="uk-checkbox" type="checkbox" uk-switch />
                </label>
              </div>
              <div>
                <div class="uk-margin-small-bottom"><span class="uk-text-secondary">Secondary</span> checkbox:</div>
                <label class="uk-form-label" for="checkbox-3">
                  <input id="checkbox-3" class="uk-checkbox" type="checkbox" uk-switch="type: secondary" checked />
                </label>
              </div>
              <div>
                <div class="uk-margin-small-bottom"><span class="uk-text-primary">Primary</span> checkbox:</div>
                <label class="uk-form-label" for="checkbox-4">
                  <input id="checkbox-4" class="uk-checkbox" type="checkbox" uk-switch="type: primary" checked />
                </label>
              </div>
              <div>
                <div class="uk-margin-small-bottom"><span class="uk-text-success">Success</span> checkbox:</div>
                <label class="uk-form-label" for="checkbox-5">
                  <input id="checkbox-5" class="uk-checkbox" type="checkbox" uk-switch="type: success" checked />
                </label>
              </div>
              <div>
                <div class="uk-margin-small-bottom"><span class="uk-text-warning">Warning</span> checkbox:</div>
                <label class="uk-form-label" for="checkbox-6">
                  <input id="checkbox-6" class="uk-checkbox" type="checkbox" uk-switch="type: warning" checked />
                </label>
              </div>
              <div>
                <div class="uk-margin-small-bottom"><span class="uk-text-danger">Danger</span> checkbox:</div>
                <label class="uk-form-label" for="checkbox-7">
                  <input id="checkbox-7" class="uk-checkbox" type="checkbox" uk-switch="type: danger" checked />
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="uk-text-mini uk-text-right">made by <b>Antonius</b></div>
    </div>
  </div>
</div>

/* Snippets style */
body { background-color: #ebebeb; }
.uk-box-shadow-remove { box-shadow: none; }
.uk-text-mini { font-size: 8px; }
/* Checkbox colors */
:root {
  --color-white: #ffffff;
  --color-default: rgba(0, 0, 0, 0.22);
  --color-primary: #3b82f6;
  --color-secondary: #6366f1;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
}

/* UIkit checkbox label cursor fix*/
label:has(> input[type="checkbox"]) {
  cursor: pointer;
}

/* Checkbox switcher block */
.uk-checkbox-switcher {
  display: inline-block;
  height: 24px;
  width: 50px;
}

.uk-checkbox-switch {
  display: inline-block;
  height: 24px;
  width: 50px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-radius: 5px;
  bottom: 0;
  cursor: pointer;
  transition-property: background-color;
  transition-duration: 0.2s;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
  background-color: none;
  width: 100%;
  border: none;
}

.uk-checkbox-switch:before {
  content: '';
  background-color: var(--color-default);
  position: absolute;
  width: 16px;
  height: 16px;
  left: 4px;
  bottom: 4px;
  border-radius: 3px;
  transition-property: transform, box-shadow;
  transition-duration: 0.2s;
}

/* Default styles */
div[class*="uk-checkbox-switch-"] {
  background-color: var(--color-default) !important;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.22);
}

div[class*="uk-checkbox-switch-"]:before {
  background-color: var(--color-white) !important;
}

/* Active animation */
input:checked+.uk-checkbox-switch:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Secondary colors */
input:checked+.uk-checkbox-switch-secondary,
.uk-checkbox-switch-secondary.checked {
  background-color: var(--color-secondary) !important;
}

/* Primary colors */
input:checked+.uk-checkbox-switch-primary,
.uk-checkbox-switch-primary.checked {
  background-color: var(--color-primary) !important;
}

/* Success colors */
input:checked+.uk-checkbox-switch-success,
.uk-checkbox-switch-success.checked {
  background-color: var(--color-success) !important;
}

/* Warning colors */
input:checked+.uk-checkbox-switch-warning,
.uk-checkbox-switch-warning.checked {
  background-color: var(--color-warning) !important;
}

/* Danger colors */
input:checked+.uk-checkbox-switch-danger,
.uk-checkbox-switch-danger.checked {
  background-color: var(--color-danger) !important;
}

/* Accept colors */
.uk-checkbox-switch.uk-checkbox-switch-accept {
  background-color: var(--color-danger) !important;
}

input:checked+.uk-checkbox-switch-accept,
.uk-checkbox-switch-accept.checked {
  background-color: var(--color-success) !important;
}

(function (UIkit) {
  if (!UIkit) {
    throw new Error('UIkit not found. Make sure UIkit is loaded before this plugin.');
  }

UIkit.component('switch', {
    props: {
      type: String
    },
    connected() {
      if (this.$el.tagName !== 'INPUT' || this.$el.type !== 'checkbox') return;
      if (this.$el.parentNode && !this.$el.parentNode.classList.contains('uk-position-relative')) {
        this.$el.parentNode.classList.add('uk-position-relative');
      }
      this.$el.classList.add('uk-hidden');
      this.$el.parentNode.classList.add('uk-checkbox-switcher');

this.block = document.createElement('div');
      this.block.className = 'uk-checkbox-switch';
      if (this.type == 'primary') {
        this.block.classList.add('uk-checkbox-switch-primary');
      }
      if (this.type == 'secondary') {
        this.block.classList.add('uk-checkbox-switch-secondary');
      }
      if (this.type == 'success') {
        this.block.classList.add('uk-checkbox-switch-success');
      }
      if (this.type == 'warning') {
        this.block.classList.add('uk-checkbox-switch-warning');
      }
      if (this.type == 'danger') {
        this.block.classList.add('uk-checkbox-switch-danger');
      }
      if (this.type == 'accept') {
        this.block.classList.add('uk-checkbox-switch-accept');
      }
      this.$el.parentNode.appendChild(this.block);
      this.$el.parentNode.appendChild(this.block);
    }
  });
})(window.UIkit);

Information

Detailed overview of a selected code snippet

antonius

159

20.03.2025, 14:07:28

28.03.2025, 11:12:41

uk-border, uk-box, uk-card, uk-checkbox, uk-child, uk-container, uk-flex, uk-form, uk-grid, uk-hidden, uk-margin, uk-padding, uk-placeholder, uk-position, uk-switch, uk-text, uk-width

Comments

Browse user feedback and discussions in detail

Currently in development and will be available soon. Stay tuned for updates!