Uikit Custom Component Example

uk_comp.js

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

  UIkit.component('floating-label', {
      connected() {
          this.initFloatingLabel();
      },
      methods: {
          initFloatingLabel() {
              const input = this.$el.querySelector("input, textarea");
              if (!input) return;

              const label = document.createElement("label");
              label.classList.add("uk-form-label", "floating-label");
              label.textContent = input.getAttribute("placeholder") || "Label";
              input.removeAttribute("placeholder");
              this.$el.prepend(label);
              if (input.value) {
                  label.classList.add("active");
              }
              input.addEventListener("focus", () => label.classList.add("active"));
              input.addEventListener("blur", () => {
                  if (!input.value) label.classList.remove("active");
              });
          }
      }
  });
})(window.UIkit);