Password Input

The PasswordInput component is a specialized input for password fields. It builds on top of the base Input component and adds a secure show/hide toggle with full keyboard and screen-reader support.

It is designed for authentication flows, onboarding forms, and settings screens.

Import

import { PasswordInput } from "@/components/ui/password-input";

Basic usage

<PasswordInput
  label="Password"
  placeholder="••••••••"
/>

import { PasswordInput } from "@/components/ui/password-input";

export default function Demo() {
  return (
    <PasswordInput
      label="Password"
      placeholder="••••••••"
    />
  );
}

Behavior

• Defaults to type="password"
• Toggles between password and text
• Uses a semantic <button> for the toggle
• Supports mouse, keyboard, and screen readers
• Fully controlled internally (no extra props required)

API

Props

PasswordInput exposes the same API as Input, except:

• type is controlled internally
• rightIcon is reserved for the visibility toggle

All other props (label, error, helperText, size, etc.) are supported.

TypeScript types

These types define the public API of the PasswordInput component.

import type { InputProps } from "@/components/ui/input";

export interface PasswordInputProps
  extends Omit<InputProps, "type" | "rightIcon"> {}

Accessibility

• Toggle is a real <button>
• Uses aria-label and aria-pressed
• Icons are decorative and marked aria-hidden
• Preserves native password semantics

Design guidelines

• Use only for password or secret inputs
• Do not add additional right icons
• Pair with helper text for password requirements

Related guides