PasswordField

PasswordField renders a styled <input type="password"> with an icon button on the right to toggle visibility between password and text mode. It supports all native input attributes via the rest-props spread.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | string | Yes | — | Current password string. | | onChange | (value: string) => void | No | — | Called with the new string on every keystroke. | | label | string | No | — | Label rendered above the input. | | description | string | No | — | Helper text rendered below the input. | | placeholder | string | No | — | Placeholder text for the input. | | autoComplete | 'off' \| 'current-password' \| 'new-password' | No | 'off' | Value for the native autocomplete attribute. | | toggleButtonSize | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | No | 'sm' | Size of the show/hide icon button. | | toggleButtonColor | string | No | themeColors.text | Color of the show/hide icon button. | | containerStyle | React.CSSProperties | No | — | Styles applied to the root container div. | | inputWrapperStyle | React.CSSProperties | No | — | Styles applied to the inner wrapper div that contains the input and toggle button. | | inputStyle | React.CSSProperties | No | — | Styles applied directly to the <input> element. | | labelStyle | React.CSSProperties | No | — | Styles applied to the label element. | | descriptionStyle | React.CSSProperties | No | — | Styles applied to the description paragraph. | | className | string | No | — | CSS class name applied to the inner wrapper div. | | id | string | No | — | id attribute on the <input>. | | ...props | any | No | — | Additional attributes forwarded to the <input> element. |

Usage

Basic

import React, { useState } from 'react';
import PasswordField from '@/components/fields/PasswordField';

export default function Example() {
  const [password, setPassword] = useState('');

  return (
    <PasswordField
      label="Password"
      value={password}
      onChange={setPassword}
      placeholder="Enter your password"
    />
  );
}

New password with autocomplete hint

<PasswordField
  label="New password"
  value={newPassword}
  onChange={setNewPassword}
  autoComplete="new-password"
  description="Minimum 8 characters."
  placeholder="Choose a strong password"
/>