Password field ported

Capture sensitive text with a visible reveal control.

Capture sensitive text with a visible reveal control.

Live specimen

Loading demo…

Guidance

When to use

Sign in forms and password confirmation fields.
Any secret the person may want to check by revealing it.

When not to use

Use password-strength when creating or changing a password.
Use input for non-secret values.

Installation

pnpm dlx shadcn-svelte@latest add @arcui/password-field

Usage

<script lang="ts">
  import { PasswordField } from '$lib/components/password-field';

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

<PasswordField
  label="Password"
  name="password"
  autocomplete="current-password"
  description="Must be at least 8 characters"
  bind:value={password}
  required
/>

Variants & Examples

Default

Standard appearance and configuration.

<PasswordField
      label="Password"
      name="password"
      autoComplete="current-password"
      required
    />

API Reference

Prop	Type	Default	Description
`label`	`string`	–	(Required) Visible label tied to the input.
`description`	`string`	–	Helper copy under the field, linked through aria-describedby.
`...props`	`Omit<InputHTMLAttributes<HTMLInputElement>, "type">`	–	Forwarded to the input, including ref, value, onChange, name, and autoComplete.

Keyboard Interactions

Key	Action
`Enter / Space`	On the toggle button, shows or hides the password.

Accessibility

Toggle is a native button with aria-pressed and a label that switches between "Show password" and "Hide password".
Description is linked through aria-describedby.
Set autoComplete to current-password or new-password so password managers work.

Motion

- A slash draws across the eye and masks the outline beneath it instead of swapping icons. - After the first toggle, the value resolves through a short CSS reveal on each change; reduced motion draws the slash instantly.

Notes for AI

Use for sign in and password confirmation. Use password-strength when the user is creating a new password.
Uncontrolled by default; pass value and onChange to control it like a native input.

Source of truth: registry/components/password-field/password-field.tsx