# 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).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.bravostudio.app/bravo-tags/form-and-input-fields/password-visibility-toggle.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.