๐Ÿ‘๏ธ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


In order to set up the password visibility toggle, you need this tag in your app page.


  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.


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