> For the complete documentation index, see [llms.txt](https://docs.bravostudio.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bravostudio.app/bravo-tags/form-and-input-fields/password-visibility-toggle.md).

# 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

***

### :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&amp;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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.