PasswordInput

Preview

Installation

pnpm add fancy-ui-svelte

import { PasswordInput } from 'fancy-ui-svelte'

Usage

svelte

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

<PasswordInput />

Examples

Basic Usage

svelte

<script lang="ts">
	import { PasswordInput } from "$lib/fancy-ui/password-input";

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

<PasswordInput 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 "$lib/fancy-ui/password-input";

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

<PasswordInput
	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 "$lib/fancy-ui/form-field";
	import { PasswordInput } from "$lib/fancy-ui/password-input";

	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 bind:value={password} autocomplete="new-password" showStrength />
</FormField>

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