Password
A password input with a reveal button: one tap shows what you typed, another hides it again.
Examples
Password
New password
Anatomy
.input-group | Holds the input and the button and draws one focus ring around both. |
> input.input[type=password] | The password itself. Give it autocomplete="current-password" or "new-password". |
> button.btn[data-password] | The reveal toggle: data-icon, aria-pressed="false" and an aria-label. Transparent, muted until hover, with no pressed edge. |
> button > i.icon × 2 | Two icons: the first shows while hidden, the second while revealed (eye, eye-off). |
API
| Attribute | Values | Description |
|---|---|---|
data-password | boolean | On the button: aequitas.js toggles the input in the same group between password and text. |
aria-pressed | truefalse | Revealed or not. aequitas.js sets it; the CSS swaps the two icons on it. |
autocomplete | current-passwordnew-password | Tells password managers whether to fill or to suggest. |
Behaviour
A click on [data-password] switches the first <input> in the button's parent between type="password" and type="text" and sets aria-pressed to match. Without it the button does nothing, and the input stays a normal password field.
From aequitas.js. It initialises itself and enhances markup added later on its own, so it works the same in an SPA.
Accessibility
- Keep the
aria-labelfixed ("Show password");aria-pressedannounces whether it is on. Changing both would say the same thing twice. - Use
type="button"so the toggle never submits the form. - The browser's own reveal button (Edge) is hidden inside the group so there is only one.
| Key | Effect |
|---|---|
| Enter / Space | On the button: reveals or hides the password. |