Password Input

A password input component with a visibility toggle button to show or hide the entered password.

Anatomy

<script>
  import { PasswordInput } from "@saas-ui/svelte/components/password-input";
</script>

<PasswordInput placeholder="Enter your password" />

Examples

Basic Accessibility

Basic password input with visibility toggle button.

<Box class="w-72">
	<PasswordInput aria-label="Password" />
</Box>

Colours Accessibility

Password input with different colour schemes using the colour prop.

<Stack gap={4} class="max-w-md">
	{#each colours as colour}
		<HStack align="center" gap={4}>
			<Text size="xs" class="w-16">{colour}</Text>
			<PasswordInput
				{colour}
				placeholder="Focus to see ring"
				aria-label="Password {colour}"
				class="flex-1"
			/>
		</HStack>
	{/each}
</Stack>

Controlled Accessibility

Controlled password input with external value management.

<Stack gap={4} class="max-w-72">
	<PasswordInput
		bind:value={controlledValue}
		placeholder="Enter password"
		aria-label="Password"
	/>
	<Text size="sm"
		>Value: {controlledValue
			? "".repeat(controlledValue.length)
			: "(empty)"}</Text>
</Stack>

Controlled Visibility Accessibility

Controlled visibility state to programmatically show or hide the password.

<Stack gap={4} class="max-w-72">
	<PasswordInput
		defaultValue="secret"
		visible={controlledVisible}
		onVisibleChange={(v) => (controlledVisible = v)}
		aria-label="Password"
	/>
	<Text size="sm"
		>Password is {controlledVisible ? "visible" : "hidden"}</Text>
</Stack>

Disabled Accessibility

Disabled password input that prevents user interaction.

<Box class="w-72">
	<PasswordInput
		disabled
		placeholder="Disabled password"
		aria-label="Password"
	/>
</Box>

Invalid Accessibility

Use the invalid prop to display validation error styling.

<Field.Root invalid class="w-72">
	<Field.Label>Password</Field.Label>
	<PasswordInput placeholder="Enter password" />
	<Field.ErrorText>Password must be at least 8 characters</Field.ErrorText>
</Field.Root>

Sizes Accessibility

Password input in different sizes. Available sizes: xs, sm, md, lg.

<Stack gap={4} class="max-w-72">
	{#each passwordInputSizes as size}
		<HStack align="center" gap={4}>
			<Text size="xs" class="min-w-[3ch]">{size}</Text>
			<PasswordInput
				{size}
				placeholder={size}
				aria-label="Password {size}"
				class="flex-1"
			/>
		</HStack>
	{/each}
</Stack>

With Field Accessibility

Password input with Field wrapper for label and helper text support.

<form
	class="max-w-sm"
	onsubmit={(e) => {
		e.preventDefault();
		console.log("Form submitted");
	}}
>
	<Stack gap={4} align="start">
		<Field.Root>
			<Field.Label>Username</Field.Label>
			<Input name="username" placeholder="Enter username" />
		</Field.Root>

		<Field.Root>
			<Field.Label>Password</Field.Label>
			<PasswordInput name="password" placeholder="Enter password" />
		</Field.Root>

		<Button type="submit">Submit</Button>
	</Stack>
</form>

Props

Prop	Type	Default	Description
`size`	`xs \| sm \| md \| lg`	`md`	The size of the component.
`colour`	`gray \| red \| orange \| yellow \| green \| teal \| blue \| cyan \| purple \| pink \| rose`	`gray`	The colour theme of the component.
`invalid`	`boolean`	`false`	Whether the component is in an invalid state.
`disabled`	`boolean`	`false`	Whether the component is disabled.
`placeholder`	`text`	-	Placeholder text for the input.
`class`	`text`	-	Additional CSS classes to apply.