Password
A password input with a show / hide toggle.
<script lang="ts">
import { Password } from "$lib/components/ui/password";
let value = $state("");
</script>
<div class="w-full max-w-xs">
<Password bind:value showStrength placeholder="Enter your password" />
</div>Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy the password source from the registry into $lib/components/ui/password.
Usage
<script lang="ts">
import { Password } from '$lib/components/ui/password';
let value = $state('');
</script>
<Password bind:value placeholder="Enter your password" />Strength meter
Pass showStrength to render a strength bar. Scoring uses @zxcvbn-ts (a vetted estimator), not a homemade heuristic.
<Password bind:value showStrength />npm install @zxcvbn-ts/core @zxcvbn-ts/language-common