InputPassword

El componente InputPassword es un campo de entrada de contraseña que permite alternar entre la visibilidad del texto y el modo de contraseña mediante un ícono de ojo.

Ejemplo

Importación

Para importar el componente InputPassword, se puede hacer desde fenextjs

import { InputPassword } from "fenextjs";

Parámetros

Parámetro	Tipo	Requerido	Default	Descripcion
id	string	no	''	ID del campo de entrada.
name	string	no	''	Nombre del campo de entrada.
validator	FenextjsValidatorClass	no	undefined	Clase de validador de Fenextjs para la validación de la entrada.
label	ReactNode	no	''	Texto de etiqueta que se muestra para el campo de entrada.
placeholder	string	no	''	Texto que se muestra en el campo de entrada cuando está vacío.
defaultValue	string \| undefined \| null	no	undefined	Valor predeterminado para establecer en el campo de entrada.
onChange	(value: string) => void	no	undefined	Función que se ejecuta al cambiar el valor del input.
icon	ReactNode	no	undefined	Ícono utilizado para alternar entre el texto visible y la contraseña.
className	string	no	''	Clase CSS para el contenedor del componente.
classNameContentEye	string	no	''	Clase CSS para personalizar el ícono de alternancia.
disabled	boolean	no	false	Determina si el input está deshabilitado.
autoFocus	boolean	no	false	Determina si el input debe recibir foco automáticamente al cargarse.

Alternancia de visibilidad

El componente incluye un ícono que permite alternar entre mostrar el texto de la contraseña o mantenerlo oculto. El estado de visibilidad cambia entre 'text' y 'password' al hacer click en el ícono.

Storybook

Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)

Usos

Básico

<InputPassword placeholder="Enter your password" />

Con valor inicial

<InputPassword value="mySecretPassword" />

Personalización de clase

<InputPassword className="custom-input" />

Numbercount Phone