wiki-Password-Input

Ver en Git

---

Password Input

El componente PasswordInput es un campo de entrada especializado para contraseñas que incluye validación personalizada mediante expresiones regulares y soporte para estilos adicionales.

Referencia de la API

Propiedad	Tipo	Descripción	Valor por defecto
value	string	Valor de la contraseña ingresada.	-
onChange	(newValue: string) => void	Función que se ejecuta cuando el valor del campo cambia.	-
regex	RegExp	Expresión regular para validar la contraseña.	-
extraStyles	CSSProperties	Estilos adicionales aplicados al campo de entrada.	-
required	boolean	Indica si el campo es obligatorio.	false
aura-test	string	Identificador para pruebas automatizadas.	'password'
Otras	InputHTMLAttributes<HTMLInputElement> excluyendo onChange	Se permiten todas las propiedades estándar de un elemento <input> excepto onChange.	-

Ejemplo de Uso

import { useState } from 'react';
import { PasswordInput } from '@auravant/ui-kit';

export const PasswordInputExample = () => {
 const [password, setPassword] = useState('');

 return (
 <PasswordInput
 value={password}
 onChange={setPassword}
 placeholder="Ingresá tu contraseña"
 required
 regex={/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/}
 extraStyles={{ border: '1px solid #ccc', padding: '8px' }}
 />
 );
};

Notas

• La propiedad regex permite definir una expresión regular para validar automáticamente la contraseña ingresada. Si no pasa la validación, se aplica una clase específica que resalta el error.
• Se pueden agregar estilos personalizados mediante la propiedad extraStyles.