Password Input

Secure password fields for auth flowsLink to section

The PasswordInput component is a specialized input for password and secret fields.

It builds on top of the base Input component and adds a secure show/hide toggle with keyboard and screen-reader support.

Use it for:

• login forms
• registration forms
• password reset flows
• password change forms
• account security settings
• onboarding flows that require credentials

ImportLink to section

import { PasswordInput }  from "@pycolors/ui";

Basic usageLink to section

import { PasswordInput } from "@pycolors/ui";

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

When to use PasswordInputLink to section

Use PasswordInput when the value should be hidden by default and revealed only by explicit user intent.

BehaviorLink to section

PasswordInput is controlled internally for visibility.

It:

• defaults to type="password"
• toggles between password and text
• uses a semantic button for the toggle
• supports mouse and keyboard interaction
• exposes accessible toggle state with aria-pressed
• reserves the right icon area for the visibility toggle

With helper textLink to section

Use helper text to explain password requirements.

import { PasswordInput } from "@pycolors/ui";

export function PasswordInputHelper() {
  return (
    <PasswordInput
      label="Password"
      placeholder="••••••••"
      helperText="Use at least 8 characters with one number."
    />
  );
}

Validation errorLink to section

Use error to show field-level password validation.

import { PasswordInput } from "@pycolors/ui";

export function PasswordInputError() {
  return (
    <PasswordInput
      label="Password"
      placeholder="••••••••"
      error="Password must be at least 8 characters."
    />
  );
}

SizesLink to section

PasswordInput supports the same size API as Input.

import { PasswordInput } from "@pycolors/ui";

export function PasswordInputSizes() {
  return (
    <div className="flex w-80 flex-col gap-3">
      <PasswordInput size="sm" label="Small" placeholder="••••••••" />
      <PasswordInput size="md" label="Medium" placeholder="••••••••" />
      <PasswordInput size="lg" label="Large" placeholder="••••••••" />
    </div>
  );
}

Available sizesLink to section

Usage patternsLink to section

PasswordInput vs InputLink to section

APILink to section

Props

PasswordInput exposes the same API as Input, except:

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

All other supported Input props are forwarded.

TypeScript typesLink to section

import type { InputProps } from "@pycolors/ui";

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

AccessibilityLink to section

PasswordInput is designed for accessible credential entry.

Guidelines:

• the visibility toggle is a real button
• the toggle should expose aria-label
• the toggle should expose aria-pressed
• icons should be decorative and use aria-hidden
• the input preserves native password semantics
• labels, helper text, and errors follow Input behavior
• use appropriate autoComplete values
• do not remove focus rings from the toggle or field

Recommended autocomplete values:

Prefer / avoidLink to section

Product copy guidelinesLink to section

Password copy should reduce friction without weakening security expectations.

Common questionsLink to section

RelatedLink to section