Floating labels

Inspect the full details and code of a selected snippet

(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);

Information

Detailed overview of a selected code snippet

yaneony

112

20.03.2025, 16:05:52

28.03.2025, 11:00:57

uk-border, uk-card, uk-container, uk-flex, uk-floating, uk-form, uk-input, uk-margin, uk-padding, uk-position, uk-textarea

Comments

Browse user feedback and discussions in detail

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