Password field Show/Hide

Based on this:

It’s either you like it or don’t like it movement so I’m hoping it doesn’t start a discussion here :slight_smile:


I’m confused about the post. Are you making this a feature request? Are you sharing something you built? It’s definitely a fine bit of functionality, I’m just not sure what your intention is. Sorry!


Yuo. Feature request :slight_smile: It’s in the “idea” category :slight_smile:

I ended up building it.

It was quite easy.

You just need a Text field with the value of the password input, 2 icons, 1 state and 1 workflow to show/hide elements based on the state.

Make sure that the Text field mimics the style of the input so the transition is seen as transparent.


@romanmg created a video showing how this can be done


Hi - I think this may be about as good as you can get it. If you have two inputs, ie one setup as “Content format” Password and overlay a second input with “Content format” Text (using a toggle icon to switch between the two), you’ll get into a circular state which will give you run-time errors.

So, I’m mobile right now, but, if you look at the sample (wizard-produced) app, the pw fields have obfuscate functionality. I’m petty sure this is just built in. (Checkbox on text inputs perhaps? Haven’t looked at that in a while, but it can’t be hard to find.)

My solution uses the input for the obfuscated password and a text type to show the password. It wasn’t ideal at the time(december 2016) but it was the only way.

@anon94914631 Now that you can create plugins I would go that route and create a plugin for this.

This is just one out of dozens of jquery/js plugins:

Good timing, this might be useful:

1 Like

Here’s the obfuscate (“password”) option:

@anon94914631 I would suggest you keep things on topic and create new topics for your issues. They will get more visibility while keeping the forum tidy.

Now… Content Format is not an option you can modify on Conditional. However, you could just toggle the visibility of two inputs that share the same value. (Easiest solution: put them in a group of type text where the source of that text is your password database field, I think. Toggle their visibility via custom state.)

Yeah. Not an excuse really :slight_smile:
I’m getting a notification everytime you write here and it hasn’t got anything to do with the original topic.

@sridharan.s @NigelG can we split this topic?

Thx JonL, it helped me!
I improved it a little bit: you do not need a state nor a workflow.
The eye icons are native. You just need a Text field over the input field and some conditions:

When the Eye icon is hovered:

  • Display the text
  • Change the font color of the input to transparent
  • Change the eye icon to the crossed eye icon
1 Like

Bonjour voici une solution :

Avant toutes chose, activer > Expose the option to add an ID attribute to HTML elements :white_check_mark:

  1. Ajouter un élément HTML
    insérer ce code