--- title: "Password input" description: "A password field with a button that shows and hides what was typed, built on input group." url: "https://susonwaiba.github.io/htmx-ui/docs/components/password-input" section: "Components" --- # Password input A password field with a button that shows and hides what was typed, built on input group. ```html
``` ## Markup - Wrap a `type="password"` `.input` in an [input group](https://susonwaiba.github.io/htmx-ui/docs/components/input-group) with `.password-input` and `data-password-input`. - Put the toggle in an `.input-group-addon-inline-end`: a `.btn.btn-ghost.btn-icon.password-toggle` with `data-password-toggle`, holding `.password-toggle-show` (the eye) and `.password-toggle-hide` (the eye crossed out). - Give it `type="button"` so it never submits the form, and `aria-label="Show password"`. The behaviour switches the input between `type="password"` and `type="text"` and sets `aria-pressed` on the button, which swaps the icons. The label stays "Show password": screen readers say "Show password, toggle button, pressed" once it's on, the pattern assistive technology expects. The caret and any selection stay where they were, and tapping the toggle while typing keeps focus (and the phone keyboard) in the input. ## Text toggle Words instead of an icon: drop `.btn-icon` and write Show and Hide in the two spans. They share one space, so the button doesn't change width. ```html
``` ## Checkbox A [checkbox](https://susonwaiba.github.io/htmx-ui/docs/components/checkbox) with `data-password-toggle` anywhere inside the wrapper works as the toggle too. Here one checkbox shows both fields of a new-password form: ```html
``` Every input with `data-password` (or `type="password"`) inside the wrapper is shown and hidden together. ## Caps Lock warning Elements with `data-password-caps` in the field are shown only while Caps Lock is on as the user types in the password, and hidden again when it goes off or the input loses focus. Try it: ```html
``` ## States As with any [input group](https://susonwaiba.github.io/htmx-ui/docs/components/input-group), `aria-invalid="true"` on the input turns the border red and `disabled` fades the whole field; a disabled input disables its toggle. Pair them with [field](https://susonwaiba.github.io/htmx-ui/docs/components/field) messages: ```html

That password is not right.

At least 12 characters.

``` ## Browsers and password managers - **Saving the password.** Submitting the form hides the password again first, so browsers and password managers see a password field and offer to save it, and it isn't left on screen after an htmx swap. - **Autofill.** Use `autocomplete="current-password"` on sign-in forms and `"new-password"` on sign-up and change-password forms, so password managers fill the right one and suggest strong passwords. The macro sets `autocapitalize="off"` and `spellcheck="false"` too, so a shown password isn't capitalised or sent to a spell checker. - **Edge's own eye.** Microsoft Edge draws a reveal button inside password inputs; `.password-input` hides it so there is only one toggle. Safari's key icon for saved passwords stays. ## With htmx The toggle is a `type="button"`, so it never sends the form. The behaviour runs again on inputs htmx swaps in, so a server re-render with an error keeps working. It also fires a bubbling `password-input:toggle` with `detail.visible` on the wrapper. ## Nunjucks macro The `password_input` macro writes the group, input and toggle. ```jinja page.html {% from "components/password-input/password-input.html" import password_input %}
{{ password_input("password", id="password", required=true, caps=true) }}
{{ password_input("new-password", autocomplete="new-password", toggle="text", minlength=12) }} {{ password_input("password", invalid=true, attrs={"aria-describedby": "password-error"}) }} ``` ## Reference | Class / attribute | Description | | --- | --- | | `.password-input` | On the .input-group. Add data-password-input. | | `.password-toggle` | The show / hide button. Add data-password-toggle. | | `.password-toggle-show / .password-toggle-hide` | Its look while hidden / while shown. | | `data-password-toggle` | On the button, or on a checkbox. | | `data-password` | Marks more inputs to show and hide together (default: type="password"). | | `data-password-caps` | Shown only while Caps Lock is on. | | `data-visible` | Set on the wrapper while the password is shown. | | `password-input:toggle` | Event on the wrapper with detail { visible }. |