Toggle password visibility feature

[sheriffderek]

I'm curious if there are any paths in FormKit for password visibility toggles.

There's already a spot in the markup where the appended icons can go, but I don't see any discussion about it. Here's a quick CodePen: https://codepen.io/perpetual-education/pen/poxpObG

If there's not already one that I'm not seeing, then I'd like to request this. : )

I'd also like the added bonus of connecting a password and a password confirmation field so that the toggle is optionally toggled on both fields (when noted as connected).

I'll also look into the "Create your own field" story.

🔓

[andrew-boyd]

We actually cover this in the Icons documentation as one of the examples. You can find a functioning demo here:
https://formkit.com/essentials/icons#icon-click-handlers

Binding the behavior across inputs would be as simple as setting the type and suffix-icon values to refs and then using them on both your password and password confirmation fields so that when one field is toggled it affects both inputs.

https://formkit.link/047c90345f40bbea88182d29ee38165b

[sheriffderek]

Excellent. Very cool.

For some reason, I assumed those icons were just going to be static. But as it so often happens... I'm reminded that we can make pretty much anything happen. Thank you!