Password

'use client';

import { Password } from '@/ui/forms/password/Password';

export function PasswordDemo() {
  return (
    <Password
      label="Password"
      description="Enter your password"
      placeholder="Enter password"
      validationMessages={[
        {
          label: 'At least 12 characters',
          status: 'success',
        },
        {
          label: 'At least one lowercase',
          status: 'success',
        },
        {
          label: 'At least one uppercase',
          status: 'error',
        },
        {
          label: "At least one special character #$%&'()*",
          status: 'error',
        },
        {
          label: 'At least one number',
          status: 'error',
        },
      ]}
    />
  );
}

Installation

npmpnpmyarnbun
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/password.json
Copy

Usage

Copy'use client';
 
import { useState } from 'react';
import { Password } from '@/docs/lib/ui/forms/password/password';
 
export function Component() {
  const [password, setPassword] = useState('');
 
  const validationMessages = [
    {
      label: 'At least 8 characters',
      status: password.length >= 8 ? 'success' : 'default',
    },
    {
      label: 'Contains uppercase letter',
      status: /[A-Z]/.test(password) ? 'success' : 'default',
    },
    {
      label: 'Contains number',
      status: /\d/.test(password) ? 'success' : 'default',
    },
  ];
 
  return (
    <Password
      label="Password"
      description="Create a secure password"
      value={password}
      onChange={(name, value) => setPassword(value)}
      validationMessages={validationMessages}
      required
    />
  );
}

API Reference

Password

ValidationMessage

The Password component also supports all standard HTML input attributes via InputHTMLAttributes<HTMLInputElement>.

Notes

• Show/Hide Toggle: The component includes a visibility toggle button (eye icon) that allows users to switch between masked (type="password") and visible (type="text") password display. The icon changes from "Invisible" to "Visible" based on the current state.
• Automatic Type Reset: When the field is disabled, the input type automatically resets to "password" to ensure security.
• Validation Messages: The validationMessages prop accepts an array of validation rules with individual status tracking. Each message displays with an icon (edit, error, or check) and color-coded text (grey, red, or green) based on its status.
• Without Field Validation: When withoutFieldValidation is true, the component hides validation icons and error messages, maintaining a clean default appearance while still allowing custom validation messages to be displayed.
• FormControl Integration: Password uses the FormControl component internally, inheriting features like labels, descriptions, error messages, and validation states.
• Validation Icons: When validationStatus is "error" or "success", appropriate icons (cross or check) appear inside the input field on the right side, before the visibility toggle button.
• Disabled State: When disabled, the visibility toggle button is hidden, the input type is locked to "password", the field shows a grey background (bg-pearl text-grey), and user interaction is prevented.
• Automatic ID Generation: If no id prop is provided, a unique ID is automatically generated using React's useId hook.
• Value Management: The component uses the internal useValue hook for state management, which handles value formatting and change callbacks.
• Client Component: This component must be used in a client component context ("use client").
• Accessibility: The input field includes an aria-label attribute set to the field name for screen reader support.
• Data Attributes: The component includes data-name="Password" and data-testid attributes for testing and debugging.
• Rounded Pill Design: The input has a rounded pill shape with consistent padding and border styling.
• Dynamic Padding: The input padding adjusts based on whether validation icons are displayed (more padding on the right when icons are present).