An input that can toggle visibility of the password text and check the strength of the password.
<script lang="ts">
import { PasswordInput } from "$lib/components/components/password-input";
let value = $state("Password");
</script>
<PasswordInput bind:value class="w-[250px]" />pnpm dlx shadcn-svelte@latest add https://wds-shadcn-registry-svelte.netlify.app/registry/password-input.jsonnpx shadcn-svelte@latest add https://wds-shadcn-registry-svelte.netlify.app/registry/password-input.jsonbun x shadcn-svelte@latest add https://wds-shadcn-registry-svelte.netlify.app/registry/password-input.jsonyarn shadcn-svelte@latest add https://wds-shadcn-registry-svelte.netlify.app/registry/password-input.jsonCopy and paste the component source files linked at the top of this page into your project.
<script lang="ts">
import { PasswordInput } from '$lib/components/password-input';
</script>
<PasswordInput />
// Or
<PasswordInput variant="strength" /><script lang="ts">
import { PasswordInput } from "$lib/components/components/password-input";
let value = $state("");
</script>
<PasswordInput bind:value variant="strength" /><script lang="ts" module>
import { z } from "zod/v4";
const formSchema = z.object({
password: z.string().min(8, "Password must be at least 8 characters long")
});
</script>
<script lang="ts">
import { defaults, superForm } from "sveltekit-superforms";
import { zod4 } from "sveltekit-superforms/adapters";
import * as Form from "$lib/components/ui/form/index.js";
import { toast } from "svelte-sonner";
import { PasswordInput } from "$lib/components/components/password-input";
const form = superForm(defaults(zod4(formSchema)), {
validators: zod4(formSchema),
SPA: true,
resetForm: false,
onUpdate: ({ form: f }) => {
if (f.valid) {
toast.success(`You submitted ${JSON.stringify(f.data, null, 2)}`);
} else {
toast.error("Please fix the errors in the form.");
}
}
});
const { form: formData, enhance } = form;
</script>
<form method="POST" class="w-2/3 space-y-6" use:enhance>
<Form.Field {form} name="password">
<Form.Control>
{#snippet children({ props })}
<Form.Label>Password</Form.Label>
<PasswordInput {...props} bind:value={$formData.password} />
{/snippet}
</Form.Control>
<Form.FieldErrors />
</Form.Field>
<Form.Button>Submit</Form.Button>
</form>