👁️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.

Tag	Description
[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

Toggle Password

---

1. 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.

2. Add the following tag [action:toggle-password] to the component.

3. If you are using stateful components, the [state:default] will hide the password and [state:active] will show the password.

4. 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:

Bravo Sample: Password Visibility Toggle | Figma CommunityFigma

Figma File sample app

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.