> For the complete documentation index, see [llms.txt](https://attr.sygnal.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://attr.sygnal.com/sa5-forms/show-hide-password.md).

# Show / Hide Password 🧪

Purpose-

* To add the ability to have a simple button which shows or hides the current password

## Technical Notes

Approaches;&#x20;

* Custom checkbox?&#x20;
* Two elements on/off?&#x20;

## Usage Notes

`wfu-form-showpwd` =  ( name )&#x20;

Place this on the input field type=password&#x20;

Give it a unique name&#x20;

`wfu-form-showpwd-trigger` = ( name )

Place on a checkbox to show/hide the related item

If placed on a DIV then that DIV should have these two children;&#x20;

`wfu-form-showpwd=trigger-show`

Place on the element that will be the button to show the password.&#x20;

`wfu-form-showpwd=trigger-hide`

Place on the element that will be the button to hide the password.&#x20;

## Experimental

<https://codepen.io/memetican/pen/gOVaoQb/043347bb45cd62f23e50c3b65bd9b3fc>
