# Password Visibility Toggle

### Requirements

* Figma File design
* Password input field
* Updated Bravo Vision or New build for your published app

***

### :point\_right: The Tag

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

| Tag                                                           | Description                                                                                                                                                                                                                                                                                                               |
| ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:red;">`[action:toggle-password]`</mark>    | <p>Use it for the element that will be triggering the action to hide and reveal the password. <br>Could be used in <a href="https://docs.bravostudio.app/bravo-tags/components/stateful-component-like-button#binding-the-map-component-to-marker-data">stateful components</a> or a single component without states.</p> |
| Level: inside a <mark style="color:red;">`[container]`</mark> |                                                                                                                                                                                                                                                                                                                           |

### :label:How to add the tag

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2F6vXN4nIAB3pzoAtqMnKr%2Fpassword%20login%20toggle.png?alt=media&#x26;token=60e27d5b-be49-4069-bdae-7d9026d85c5e" alt=""><figcaption><p>Toggle Password</p></figcaption></figure>

***

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](https://docs.bravostudio.app/bravo-tags/components/stateful-component-like-button#binding-the-map-component-to-marker-data).
2. Add the following tag <mark style="color:red;">`[action:toggle-password]`</mark> to the component.
3. If you are using stateful components, the <mark style="color:red;">`[state:default]`</mark> **will hide the password** and <mark style="color:red;">`[state:active]`</mark> **will show** the password.
4. Ready! :tada: 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!

### :floppy\_disk: 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:**

{% embed url="<https://www.figma.com/community/file/1296788799871361105>" fullWidth="false" %}
Figma File sample app
{% endembed %}

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](https://community.bravostudio.app/home).