# How to create a password field with show/hide

> A masked password field with a visibility toggle button.

Source: https://crossfly.dev/docs/cookbook/forms/campo-de-senha — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# How to create a password field with show/hide

**Purpose.** Create a field that hides the characters (displaying `••••`) and, optionally, an icon on the right that toggles between showing and hiding the password.

## APIs used
- `campo.<TextFieldStyle>getStyle().mode(EditMode.PASSWORD)` — turns on password mode. The characters are displayed as `passwordChar` (default `'*'`; change it with `.passwordChar('•')`).
- `campo.<TextFieldStyle>getStyle().passwordToggle(true)` — automatically adds the show/hide button to the right icon. If `passwordToggle` is on, the field already assumes `PASSWORD` by default and injects the standard eye icons (`` closed / `` open) via `ensurePasswordToggleIcons()`.
- `campo.<TextFieldStyle>getStyle().passwordHiddenIcon(icon)` / `.passwordVisibleIcon(icon)` — customizes the icons (optional).
- `TextField.isPassword()` — returns `true` while the mode is `PASSWORD` (useful for conditional logic).
- `TextField.getText()` — returns the password in plain text (the masking is only visual).

> The toggle is handled internally in `onTouchUp`: when you tap the right icon, the mode toggles between `PASSWORD` and `NORMAL` in the default and focused styles, and the icon is swapped. You don't need to register a `rightIconAction` — don't override the right icon if you want the automatic behavior.

## Complete example (copy, paste, and run)
```java
package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;   // TextFieldStyle (config on the style)

/** Runnable main screen. Point the launcher (classname) and run: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // Simple password (no show button)
      TextField senha = new TextField("");
      senha.caption("Senha");
      senha.<TextFieldStyle>getStyle().mode(EditMode.PASSWORD);

      // Password with show/hide button
      TextField senhaToggle = new TextField("");
      senhaToggle.caption("Confirmar senha");
      senhaToggle.<TextFieldStyle>getStyle()
         .mode(EditMode.PASSWORD)
         .passwordToggle(true);   // injects the eye icon automatically

      Label resultado = new Label("");

      Button entrar = new Button("Entrar");
      entrar.onAction(o ->
      {
         String pwd = senha.getText();          // real text, not masked
         String pwd2 = senhaToggle.getText();
         if (!pwd.equals(pwd2))
         {
            Hint.show("As senhas não coincidem", 2000);
            return;
         }
         resultado.setText("Senha confirmada (" + pwd.length() + " caracteres)");
      });

      add(LAY_FILL, senha);
      add(LAY_FILL, senhaToggle);
      add(LAY_AUTO, entrar);
      add(LAY_FILL, resultado);
   }
}
```

> The snippet below shows **only the core**. To run it, place it in the `MainWindow` skeleton above.

## Minimal snippet
```java
import dev.crossfly.ui.*;
import dev.crossfly.ui.style.*;
import static dev.crossfly.ui.UIConstants.EditMode;

// Simple password (no show button)
TextField senha = new TextField("");
senha.caption("Senha");
senha.<TextFieldStyle>getStyle().mode(EditMode.PASSWORD);

// Password with show/hide button
TextField senhaToggle = new TextField("");
senhaToggle.caption("Senha");
senhaToggle.<TextFieldStyle>getStyle()
   .mode(EditMode.PASSWORD)
   .passwordToggle(true);   // injects the eye icon automatically

Button entrar = new Button("Entrar");
entrar.onAction(o ->
{
   String pwd = senhaToggle.getText(); // real text, not masked
   // ... authenticates
});
```

## Dig deeper
- [Text fields](/docs/ui/forms-and-input/text-fields) · [Focus and validation](/docs/ui/forms-and-input/focus-and-validation)
- Sibling recipes: [Validate a field](/docs/cookbook/forms/validar-campo) · [Responsive form](/docs/cookbook/forms/formulario-responsivo)
- Canonical source: Chapter 14 — Basic widgets · [Enums (UIConstants)](/docs/reference/enums-uiconstants)