Password
Sourcecomponents/Password.astro
Show / hide
A single-line field with an inline toggle that reveals the value. Same field styling as Input — click the eye to show or hide.
Click the eye to reveal
At least 8 characters.
On dark
White treatment for dark sections — surface="dark".
surface="dark"
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
label | string | — | Field label above the input. |
placeholder | string | — | Ghost text when empty. |
helper | string | — | Optional hint beneath the field. |
error | string | — | Error message; flips the field to the error style. |
autocomplete | string | 'current-password' | Use 'new-password' on sign-up. |
required | boolean | false | Marks the field required. |
disabled | boolean | false | Dims and blocks input (and the toggle). |
surface | 'light' | 'dark' | 'light' | Dark surface treatment. |
Usage
Set autocomplete="new-password" on sign-up so browsers offer a strong password.
<Password
name="password"
label="Password"
placeholder="••••••••"
autocomplete="current-password"
required
/>Rules
Do
Offer the show/hide toggle — it cuts typos on hidden fields.
Use the matching autocomplete so password managers work.
Don't
Enforce rules only in the error — put them in the helper up front.
Default the field to visible — it starts hidden.