PasswordField

PasswordField renderiza un <input type="password"> estilizado con un botón ícono a la derecha para alternar la visibilidad entre modo password y text. Soporta todos los atributos nativos del input via rest-props spread.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | string | Sí | — | Cadena de contraseña actual. | | onChange | (value: string) => void | No | — | Llamado con la nueva cadena en cada tecla presionada. | | label | string | No | — | Etiqueta mostrada sobre el input. | | description | string | No | — | Texto de ayuda mostrado debajo del input. | | placeholder | string | No | — | Texto placeholder del input. | | autoComplete | 'off' \| 'current-password' \| 'new-password' | No | 'off' | Valor para el atributo nativo autocomplete. | | toggleButtonSize | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | No | 'sm' | Tamaño del botón ícono de mostrar/ocultar. | | toggleButtonColor | string | No | themeColors.text | Color del botón ícono de mostrar/ocultar. | | containerStyle | React.CSSProperties | No | — | Estilos del div contenedor raíz. | | inputWrapperStyle | React.CSSProperties | No | — | Estilos del div wrapper interior que contiene el input y el botón de toggle. | | inputStyle | React.CSSProperties | No | — | Estilos aplicados directamente al elemento <input>. | | labelStyle | React.CSSProperties | No | — | Estilos del elemento de etiqueta. | | descriptionStyle | React.CSSProperties | No | — | Estilos del párrafo de descripción. | | className | string | No | — | Clase CSS del div wrapper interior. | | id | string | No | — | Atributo id del <input>. | | ...props | any | No | — | Atributos adicionales reenviados al elemento <input>. |

Uso

Básico

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

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

  return (
    <PasswordField
      label="Contraseña"
      value={password}
      onChange={setPassword}
      placeholder="Ingresá tu contraseña"
    />
  );
}

Nueva contraseña con hint de autocompletado

<PasswordField
  label="Nueva contraseña"
  value={newPassword}
  onChange={setNewPassword}
  autoComplete="new-password"
  description="Mínimo 8 caracteres."
  placeholder="Elegí una contraseña segura"
/>