# SvPasswordInput
A password field with a reveal toggle and an optional 4-level strength meter.
`SvPasswordInput` is the credential editor for sign-in and sign-up forms. It hides
the value behind dots, offers an eye toggle to reveal it, and can show a
four-level strength meter driven by the headless `createPasswordInput` core. All
of its user-facing strings (the toggle labels and the strength words) are
localizable through `messages`. Its label / hint / error chrome comes from
[SvField](https://svgrid.com/docs/help/ui-components/sv-field/).
Related: [SvOtpInput](https://svgrid.com/docs/help/ui-components/sv-otp-input/) · [SvTextInput](https://svgrid.com/docs/help/ui-components/sv-text-input/) · [Inputs overview](https://svgrid.com/docs/help/ui-components/inputs/)
## Installation
Add it with the CLI - this drops a ready-to-edit `SvPasswordInput` starter into your app:
Prefer to see it first? `npx @svgrid/ui try password-input` opens it in a throwaway sandbox - no project needed.
Or install the package and import it directly. `SvPasswordInput` ships free in
`@svgrid/grid` and is **part of the grid's editor kit** - the same control SvGrid mounts when you edit a matching cell:
The examples on this page import from `@svgrid/grid`:
```svelte
```
```ts
import { SvPasswordInput } from '@svgrid/grid'
```
## Example
> Live demo: Password input - https://svgrid.com/demos/301-password-input/
```svelte
```
## Props
`SvPasswordInput` extends the shared `SvEditorProps` (`disabled`, `readonly`,
`required`, `invalid`, `error`, `label`, `hint`, `size`, `dir`, `name`, `id`,
`ariaLabel`) and adds:
| Prop | Type | Default | Description |
| -------------- | ------------------------------- | -------------------- | ------------------------------------------------- |
| `value` | `string` | `''` | The password value. |
| `onChange` | `(value: string) => void` | - | Fires on every input. |
| `placeholder` | `string` | - | Empty-state hint text. |
| `revealable` | `boolean` | `true` | Show the show/hide eye toggle. |
| `showStrength` | `boolean` | `false` | Show a 4-level strength meter. |
| `autocomplete` | `string` | `current-password` | Native autocomplete token. |
| `messages` | `Partial` | - | Override the built-in strings (see below). |
| `leading` | `Snippet` | - | Leading adornment (icon) inside the field. |
| `block` | `boolean` | `false` | Stretch to the container width. |
| `width` | `number` | `220` | Control width in px (ignored when `block`). |
`PasswordMessages` is `{ show; hide; weak; fair; good; strong }`.
The box, size, invalid state and focus ring are owned by [SvField](https://svgrid.com/docs/help/ui-components/sv-field/)'s
shared `frame` chrome; the reveal eye sits in the trailing slot and the strength
meter renders below the field.
## Examples
### Sign-up with a strength meter
Turn on `showStrength` and set `autocomplete="new-password"` so browsers offer to
generate and store a strong secret:
```svelte
```
### Localized strings
Pass a partial `messages` object; only the keys you set are replaced, the rest
keep their defaults:
```svelte
```
### Confirm-password match
Compare two fields with a `$derived` check and mark only the confirm field
invalid. Turn off `revealable` on the confirm field so the value cannot be peeked:
```svelte
```
Tip: the strength meter is `aria-hidden`, so put any hard requirements in `hint`
or `error` text - that is the part assistive tech actually reads.
## Accessibility
- The reveal toggle is a real `