Password input
A password input with a reveal button; its model is transient, so it never enters a snapshot.
Show reveals the password in the browser; the server checks it against the demo password and forgets it.
Each preview is its own Live page in a frame, because this site is a Vue 3.5 app built on the Pulsar starter kit. An open list or popover stays inside its frame; in your application it opens over the page.
Installation
suprnova live:add password-inputUsage
{% import "suprnova-ui/password-input/password-input.html" as password_input %}
{% call password_input::password_input("password", autocomplete="new-password") %}{% endcall %}Examples
Strength
The server rates the password's length on every change and never stores it.
Keyboard and accessibility
suprnova.password-input - a native password input with a reveal button. The model path must be a transient field (FORM-004): the value is never dehydrated into a snapshot. The reveal is an enhancement: the button is hidden until sn-password-reveal upgrades (password-input.js), and the control works without it.
API reference
password_input
| Parameter | Default | Description |
|---|---|---|
name | Required | The model field. Declare it `#[model(transient)]` so the password never enters a snapshot. |
autocomplete | "current-password" | `current-password` to sign in, `new-password` to set one. |
required | false | Marks the control required. |