Toggle password in form input field

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 password in form input field</div>
        <div class="uk-card uk-card-default uk-box-shadow-remove uk-padding-small uk-border-rounded">
          
          <div class="uk-form-label uk-form-label-required uk-margin-small-bottom">Please enter your password</div>
          <div class="uk-form-controls uk-position-relative">
            <span class="uk-form-icon uk-text-primary"><i class="fa-regular fa-fw fa-lock"></i></span>
            <input class="uk-input uk-border-rounded" id="form-password" type="password" name="password" placeholder="Password" value="" uk-password />
          </div>
          
        </div>
      </div>
      <div class="uk-text-mini uk-text-right">made by <b>Antonius</b></div>
    </div>
  </div>
</div>

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

UIkit.component('password', {
    props: {
      showIcon: String,
      hideIcon: String
    },

data() {
      return {
        showIcon: 'fa fa-eye',
        hideIcon: 'fa fa-eye-slash'
      };
    },

connected() {
      if (this.$el.tagName !== 'INPUT' || this.$el.type !== 'password') return;
      if (this.$el.parentNode && !this.$el.parentNode.classList.contains('uk-position-relative')) {
        this.$el.parentNode.classList.add('uk-position-relative');
      }

this.button = document.createElement('a');
      this.button.className = 'uk-form-icon uk-form-icon-flip';
      this.icon = document.createElement('i');
      this.icon.className = this.showIcon;
      this.button.appendChild(this.icon);
      this.$el.parentNode.insertBefore(this.button, this.$el);
      this.button.addEventListener('click', this.toggleVisibility.bind(this));
    },

disconnected() {
      if (this.button) {
        this.button.removeEventListener('click', this.toggleVisibility);
        if (this.button.parentNode) {
          this.button.parentNode.removeChild(this.button);
        }
      }
    },

methods: {
      toggleVisibility(e) {
        e.preventDefault();
        if (this.$el.type === 'password') {
          this.$el.type = 'text';
          this.icon.className = this.hideIcon;
        } else {
          this.$el.type = 'password';
          this.icon.className = this.showIcon;
        }
        this.$el.focus();
      }
    }
  });
})(window.UIkit);

Information

Detailed overview of a selected code snippet

antonius

20.03.2025, 01:26:35

28.03.2025, 11:14:02

uk-border, uk-box, uk-card, uk-container, uk-flex, uk-form, uk-input, uk-margin, uk-padding, uk-password, uk-position, uk-text, uk-width

Comments

Browse user feedback and discussions in detail

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