👁️Password Visibility Toggle
The Password Visibility Toggle is a feature that effortlessly hides/reveals your password on login and signup screens for enhanced security and convenience.
Requirements
Figma File design
Password input field
Updated Bravo Vision or New build for your published app
👉 The Tag
In order to set up the password visibility toggle, you need this tag in your app page.
[action:toggle-password]
Use it for the element that will be triggering the action to hide and reveal the password. Could be used in stateful components or a single component without states.
Level: inside a [container]
🏷️How to add the tag
Add the toggle design to your input password. You can design it as a single component or a stateful component with default and active states. Learn more about stateful components here.
Add the following tag
[action:toggle-password]to the component.If you are using stateful components, the
[state:default]will hide the password and[state:active]will show the password.Ready! 🎉 Get ready to experience a more user-friendly, secure, and efficient way of managing your passwords. Update your mobile app today and make login and signup a breeze!
💾 Example design file
Have a look at the following example to see how you can leverage to include this feature in your Bravo apps.
Figma file design:
Your feedback is valuable to us. If you have any suggestions or questions, please don't hesitate to reach out to us in the community.
Last updated
Was this helpful?