# PasswordInput

> A password field with a show/hide reveal toggle and an optional strength meter that never relies on colour alone.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Forms
- Tags: password, input, form, strength, reveal
- Docs: https://fancy-ui.rama.app/docs/components/password-input
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/password-input

## Import

```svelte
<script lang="ts">
  import { PasswordInput } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { PasswordInput } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | `""` | Current value; bindable |
| `onValueChange` | `(value: string) => void` | — | Called with the new value on every input event |
| `placeholder` | `string` | — | Shown while the field is empty |
| `disabled` | `boolean` | `false` | Blocks focus and typing; excluded from form submission |
| `readonly` | `boolean` | `false` | Blocks typing but stays focusable and is still submitted |
| `required` | `boolean` | `false` | Native required |
| `invalid` | `boolean` | `false` | Drives the error border and aria-invalid |
| `id` | `string` | — | Element id |
| `name` | `string` | — | Native name, read on form submission |
| `label` | `string` | — | Accessible name — for a control with no visible Label next to it |
| `autocomplete` | `"current-password" \| "new-password" \| "off"` | `"current-password"` | new-password opts a password manager into offering to generate one |
| `showToggle` | `boolean` | `true` | Renders the show/hide reveal button |
| `showStrength` | `boolean` | `false` | Renders the strength meter and label once there's a value |
| `strength` | `(value: string) => { score: 0 \| 1 \| 2 \| 3 \| 4; label: string }` | — | Overrides the built-in heuristic scorer — see README before trusting the default |
| `class` | `string` | — | Additional CSS classes, merged onto the field surface |
| `ref` | `HTMLInputElement \| null` | `null` | Bindable element reference |
| `sound` | `boolean` | `false` | Plays toggle-on/toggle-off when the password is revealed or hidden, once the user has enabled sound |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { PasswordInput } from "fancy-ui-svelte";

	let password = $state("");
</script>

<PasswordInput sound bind:value={password} label="Password" placeholder="Enter your password" />
```

### With Strength Meter

showStrength turns on the meter and label once there's a value.

```svelte
<script lang="ts">
	import { PasswordInput } from "fancy-ui-svelte";

	let password = $state("");
</script>

<PasswordInput
	sound
	bind:value={password}
	label="Password"
	placeholder="Enter your password"
	showStrength
/>
```

### New Password

autocomplete="new-password" plus showStrength, inside a FormField.

```svelte
<script lang="ts">
	// FormField ships from an earlier wave and supplies controlId,
	// aria-describedby and aria-invalid to PasswordInput through context —
	// PasswordInput itself needs no id or invalid prop here.
	import { FormField } from "fancy-ui-svelte";
	import { PasswordInput } from "fancy-ui-svelte";

	let password = $state("");
</script>

<FormField
	label="New password"
	description="At least 8 characters, mixing upper, lower and a number."
	class="w-full max-w-sm"
>
	<PasswordInput sound bind:value={password} autocomplete="new-password" showStrength />
</FormField>
```