Un campo de entrada especializado para contraseñas que permite alternar la visibilidad del texto.
Toggle Visibility · Error · Disabled
Importa los estilos base y el componente PasswordInput.
1import 'nave-ui-library/styles.css'2import { PasswordInput } from 'nave-ui-library/react'El Password Input viene con un botón de ojo para mostrar/ocultar los caracteres.
El botón de visibilidad se ajusta automáticamente según el estado del input.
Soporta tamaños small y medium, ajustando la posición del icono automáticamente.
Todas las props disponibles para el componente PasswordInput.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Etiqueta del campo. |
placeholder | string | — | Texto de placeholder. |
helperText | string | — | Texto de ayuda debajo del campo. |
error | boolean | — | Estado de error visual. |
disabled | boolean | — | Deshabilita el campo. |
size | "medium" | "small" | "medium" | Tamaño del campo. |
tokens | Partial<ThemeTokensBase> | — | Override local de tema/tokens. |
1{2 "name": "Input",3 "description": "Campo de entrada de texto con soporte para estados y validación.",4 "component": "Input",5 "files": [6 "components/base/data-entry/inputs/Input.tsx"7 ],8 "dependencies": [9 "react",10 "class-variance-authority"11 ],12 "void": true,13 "props": {14 "size": {15 "type": "'small' | 'medium'",16 "description": "Size of the input."17 },18 "error": {19 "type": "boolean",20 "description": "Whether the input has an error."21 },22 "helperText": {23 "type": "string",24 "description": "Helper text for the input."25 },26 "label": {27 "type": "string",28 "description": "Label for the input."29 },30 "placeholder": {31 "type": "string",32 "description": "Placeholder text for the input."33 },34 "disabled": {35 "type": "boolean",36 "description": "Whether the input is disabled."37 }38 }39}