Browse Components
Password
Private text entry with an accessible visibility control.
Basic
Use the visibility button with a pointer, Enter, or Space. Without JavaScript, the field stays masked.
Use a sample password here. This example does not send or save it.
View Code
HTML
<div class="field">
<label for="account-password">
Password
</label>
<div class="password" data-password>
<input
class="input"
id="account-password"
type="password"
name="password"
autocomplete="current-password"
autocapitalize="none"
spellcheck="false"
aria-describedby="password-help"
>
<button
type="button"
aria-controls="account-password"
aria-label="Show Password"
data-password-toggle
data-show="Show Password"
data-hide="Hide Password"
hidden
>
<svg
class="icon password-eye"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z">
</path>
<circle cx="12" cy="12" r="2.5">
</circle>
</svg>
<svg
class="icon password-eye-off"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m3 3 18 18M9 6.5A10 10 0 0 1 12 6c6 0 9.5 6 9.5 6a17 17 0 0 1-3 3.5M6 7.5A18 18 0 0 0 2.5 12s3.5 6 9.5 6a11 11 0 0 0 4-1M10.2 10.2a2.5 2.5 0 0 0 3.6 3.6">
</path>
</svg>
</button>
</div>
<p id="password-help" class="muted">
Use a sample password here. This example does not send or save it.
</p>
</div>New password
Use new-password autocomplete when creating or changing a password. Your application defines the actual requirements.
Use a sample password here. This example does not send or save it.
View Code
HTML
<div class="field">
<label for="account-password">
New password
</label>
<div class="password" data-password>
<input
class="input"
id="account-password"
type="password"
name="password"
autocomplete="new-password"
autocapitalize="none"
spellcheck="false"
aria-describedby="password-help"
>
<button
type="button"
aria-controls="account-password"
aria-label="Show Password"
data-password-toggle
data-show="Show Password"
data-hide="Hide Password"
hidden
>
<svg
class="icon password-eye"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z">
</path>
<circle cx="12" cy="12" r="2.5">
</circle>
</svg>
<svg
class="icon password-eye-off"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m3 3 18 18M9 6.5A10 10 0 0 1 12 6c6 0 9.5 6 9.5 6a17 17 0 0 1-3 3.5M6 7.5A18 18 0 0 0 2.5 12s3.5 6 9.5 6a11 11 0 0 0 4-1M10.2 10.2a2.5 2.5 0 0 0 3.6 3.6">
</path>
</svg>
</button>
</div>
<p id="password-help" class="muted">
Use a sample password here. This example does not send or save it.
</p>
</div>Required and invalid
A static validation error. Application code clears the message and aria-invalid after correction.
Error: enter your password before continuing.
View Code
HTML
<div class="field">
<label for="account-password">
Password (required)
</label>
<div class="password" data-password>
<input
class="input"
id="account-password"
type="password"
required
aria-invalid="true"
name="password"
autocomplete="current-password"
autocapitalize="none"
spellcheck="false"
aria-describedby="password-help"
>
<button
type="button"
aria-controls="account-password"
aria-label="Show Password"
data-password-toggle
data-show="Show Password"
data-hide="Hide Password"
hidden
>
<svg
class="icon password-eye"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z">
</path>
<circle cx="12" cy="12" r="2.5">
</circle>
</svg>
<svg
class="icon password-eye-off"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m3 3 18 18M9 6.5A10 10 0 0 1 12 6c6 0 9.5 6 9.5 6a17 17 0 0 1-3 3.5M6 7.5A18 18 0 0 0 2.5 12s3.5 6 9.5 6a11 11 0 0 0 4-1M10.2 10.2a2.5 2.5 0 0 0 3.6 3.6">
</path>
</svg>
</button>
</div>
<p class="field-error" id="password-help">
Error: enter your password before continuing.
</p>
</div>Disabled
Neither typing nor revealing is available while disabled.
Password entry is unavailable until an account is selected.
View Code
HTML
<div class="field">
<label for="account-password">
Password
</label>
<div class="password" data-password>
<input
class="input"
id="account-password"
type="password"
disabled
name="password"
autocomplete="current-password"
autocapitalize="none"
spellcheck="false"
aria-describedby="password-help"
>
<button
type="button"
aria-controls="account-password"
aria-label="Show Password"
data-password-toggle
data-show="Show Password"
data-hide="Hide Password"
hidden
>
<svg
class="icon password-eye"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z">
</path>
<circle cx="12" cy="12" r="2.5">
</circle>
</svg>
<svg
class="icon password-eye-off"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m3 3 18 18M9 6.5A10 10 0 0 1 12 6c6 0 9.5 6 9.5 6a17 17 0 0 1-3 3.5M6 7.5A18 18 0 0 0 2.5 12s3.5 6 9.5 6a11 11 0 0 0 4-1M10.2 10.2a2.5 2.5 0 0 0 3.6 3.6">
</path>
</svg>
</button>
</div>
<p id="password-help" class="muted">
Password entry is unavailable until an account is selected.
</p>
</div>Read-only
This fictitious sample can be revealed and copied, but cannot be edited. Never prefill real credentials into page HTML.
Use a sample password here. This example does not send or save it.
View Code
HTML
<div class="field">
<label for="account-password">
Password
</label>
<div class="password" data-password>
<input
class="input"
id="account-password"
type="password"
readonly
value="demo-only"
name="password"
autocomplete="current-password"
autocapitalize="none"
spellcheck="false"
aria-describedby="password-help"
>
<button
type="button"
aria-controls="account-password"
aria-label="Show Password"
data-password-toggle
data-show="Show Password"
data-hide="Hide Password"
hidden
>
<svg
class="icon password-eye"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z">
</path>
<circle cx="12" cy="12" r="2.5">
</circle>
</svg>
<svg
class="icon password-eye-off"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m3 3 18 18M9 6.5A10 10 0 0 1 12 6c6 0 9.5 6 9.5 6a17 17 0 0 1-3 3.5M6 7.5A18 18 0 0 0 2.5 12s3.5 6 9.5 6a11 11 0 0 0 4-1M10.2 10.2a2.5 2.5 0 0 0 3.6 3.6">
</path>
</svg>
</button>
</div>
<p id="password-help" class="muted">
Use a sample password here. This example does not send or save it.
</p>
</div>Right-to-left
Localize action labels as well as the field label.
השתמשו בסיסמה לדוגמה. היא אינה נשמרת או נשלחת.
View Code
HTML
<div dir="rtl" lang="he">
<div class="field">
<label for="account-password">
סיסמה
</label>
<div class="password" data-password>
<input
class="input"
id="account-password"
type="password"
name="password"
autocomplete="current-password"
autocapitalize="none"
spellcheck="false"
aria-describedby="password-help"
>
<button
type="button"
aria-controls="account-password"
aria-label="הצגת סיסמה"
data-password-toggle
data-show="הצגת סיסמה"
data-hide="הסתרת סיסמה"
hidden
>
<svg
class="icon password-eye"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z">
</path>
<circle cx="12" cy="12" r="2.5">
</circle>
</svg>
<svg
class="icon password-eye-off"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m3 3 18 18M9 6.5A10 10 0 0 1 12 6c6 0 9.5 6 9.5 6a17 17 0 0 1-3 3.5M6 7.5A18 18 0 0 0 2.5 12s3.5 6 9.5 6a11 11 0 0 0 4-1M10.2 10.2a2.5 2.5 0 0 0 3.6 3.6">
</path>
</svg>
</button>
</div>
<p id="password-help" class="muted">
השתמשו בסיסמה לדוגמה. היא אינה נשמרת או נשלחת.
</p>
</div>
</div>Without motion
Visibility changes immediately. Color feedback respects reduced motion and this local opt-out.
Use a sample password here. This example does not send or save it.
View Code
HTML
<div data-motion="none">
<div class="field">
<label for="account-password">
Password
</label>
<div class="password" data-password>
<input
class="input"
id="account-password"
type="password"
name="password"
autocomplete="current-password"
autocapitalize="none"
spellcheck="false"
aria-describedby="password-help"
>
<button
type="button"
aria-controls="account-password"
aria-label="Show Password"
data-password-toggle
data-show="Show Password"
data-hide="Hide Password"
hidden
>
<svg
class="icon password-eye"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z">
</path>
<circle cx="12" cy="12" r="2.5">
</circle>
</svg>
<svg
class="icon password-eye-off"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m3 3 18 18M9 6.5A10 10 0 0 1 12 6c6 0 9.5 6 9.5 6a17 17 0 0 1-3 3.5M6 7.5A18 18 0 0 0 2.5 12s3.5 6 9.5 6a11 11 0 0 0 4-1M10.2 10.2a2.5 2.5 0 0 0 3.6 3.6">
</path>
</svg>
</button>
</div>
<p id="password-help" class="muted">
Use a sample password here. This example does not send or save it.
</p>
</div>
</div>Installation
Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.
Add to your page
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/field.css">
<link rel="stylesheet" href="/library/assets/password.css">
<script defer src="/library/assets/password.js"></script>11,901 bytes CSS including base · 1,459 bytes runtime JavaScript
Usage
Use the right autocomplete
Choose current-password for sign-in and new-password for creation or changes. Keep paste and password managers available.
Make visibility explicit
The button changes between Show Password and Hide Password. It changes the existing input and never submits the form.
Keep the fallback useful
Start with type="password" and a hidden toggle. Without the component script, people can still enter a masked password.
Explain requirements
Your application owns password rules and validation. Connect help and errors with aria-describedby; clear aria-invalid when corrected.
Handle credentials responsibly
Do not put real passwords in page markup, URLs, logs, or browser storage. This component neither saves nor sends the value.
Know what is included
Reset and leaving the page remask the field. Strength scoring and authentication are separate application responsibilities.
Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.