Password

Introduce una contraseña con control de visibilidad e indicador de fortaleza opcionales.

Categoría: Formularios y selección
Import: @neural-ui/core/password
Selector: neu-password

import { NeuPasswordComponent } from '@neural-ui/core/password';

Uso

Conecta value al estado de tu aplicación. toggleable añade un botón para mostrar u ocultar; showStrength es una orientación visual, no una política de seguridad. Usa autocomplete="new-password" al crear una cuenta y "current-password" al iniciar sesión. No registres ni muestres la contraseña en un panel de estado.

Ejemplos

Prueba esta interacción gestionada por la aplicación. Código incluye los eventos y los datos iniciales.

Contraseña

Eventos: 0

Prueba y configura

Cambia las opciones públicas, prueba el resultado y consulta el template actualizado. Código contiene la implementación ejecutable completa.

Contraseña

Eventos: 0

disabled

readonly

invalid

floatingLabel

showStrength

toggleable

Opciones avanzadas · 15

Comportamiento y contenido

maxLength

minLength

placeholder

required

autocomplete

hideLabel

label

showLabel

value

Estado del formulario

dirty

hidden

pending

touched

Accesibilidad

name

inputId

Los datos estructurados, callbacks y templates se muestran en los ejemplos y en la API.

El código añade las opciones avanzadas cuando difieren del valor predeterminado. Los datos y valores de esta configuración aparecen en el estado del template.

<neu-password
  [value]="value()"
  (valueChange)="onPasswordChange($event)"
  [disabled]="false"
  [readonly]="false"
  [invalid]="false"
  [floatingLabel]="true"
  [showStrength]="true"
  [toggleable]="true"
  [autocomplete]="'new-password'"
  [hideLabel]="'Ocultar contraseña'"
  [label]="'Contraseña'"
  [showLabel]="'Mostrar contraseña'"
/>

Estado y datos de esta configuración

Estos valores corresponden a la vista previa actual. Los handlers, imports de Core y templates completos están en Código.

import { signal } from '@angular/core';

export const value = signal("");

Inputs de datos, callbacks y configuración estructurada

Estos inputs requieren un modelo o función, no un checkbox. Modifica el campo del mismo nombre en el componente de Código y enlázalo al template; los datos que ya usa esta vista previa se muestran en el estado anterior.

errors · readonly ValidationError.WithOptionalFieldTree[]

En Código: define errors con este tipo y utiliza [errors]="errors" (o errors() si es una signal).

pattern · readonly RegExp[]

En Código: define pattern con este tipo y utiliza [pattern]="pattern" (o pattern() si es una signal).

Estado y eventos

Accesibilidad y teclado

Tab alcanza el campo y el botón de visibilidad. Intro/Espacio activa el botón; cambiar la visibilidad conserva el valor.

Tecla	Acción
`Tab`	Recorre el campo y el botón de visibilidad habilitado.
`Enter`	En el botón de visibilidad, muestra u oculta la contraseña sin cambiar su valor.
`Space`	En el botón de visibilidad, muestra u oculta la contraseña sin cambiar su valor.

API

Inputs, modelos y Outputs se extraen del paquete Core instalado. Los tipos públicos enlazan a sus definiciones. Los Templates incluyen ejemplos ejecutables.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`autocomplete`	`string`	`'current-password'`	`[autocomplete]`	Atributo autocomplete del navegador para el input.
`dirty`	`boolean`	`false`	`[dirty]`	Estado del formulario que indica que el usuario ha cambiado el valor.
`disabled`	`boolean`	`false`	`[disabled]`	Impide interactuar con este control.
`errors`	`readonly ValidationError.WithOptionalFieldTree[]`	`[]`	`[errors]`	Errores de validación proporcionados por el formulario o la aplicación.
`floatingLabel`	`boolean`	`false`	`[floatingLabel]`	Muestra la etiqueta con el estilo de campo float label.
`hidden`	`boolean`	`false`	`[hidden]`	Oculta el control según el estado del formulario.
`hideLabel`	`string`	`'Hide'`	`[hideLabel]`	Texto accesible de la acción que muestra u oculta la contraseña.
`inputId`	`string`	`inject(NeuIdGenerator).getId('neu-password-')`Valor derivado	`[inputId]`	Id estable del control, generado si se omite; permite asociar etiquetas o descripciones.
`invalid`	`boolean`	`false`	`[invalid]`	Muestra el estado inválido; no añade una regla de validación.
`label`	`string`	`''`	`[label]`	Etiqueta visible que identifica el campo o la acción.
`maxLength`	`number \| undefined`	`undefined`	`[maxLength]`	Longitud máxima suministrada por el formulario. Configura el validador en el esquema.
`minLength`	`number \| undefined`	`undefined`	`[minLength]`	Longitud mínima suministrada por el formulario. Configura el validador en el esquema.
`name`	`string`	`''`	`[name]`	Nombre del control de formulario.
`pattern`	`readonly RegExp[]`	`[]`	`[pattern]`	Restricciones de validación con expresiones regulares suministradas por el formulario.
`pending`	`boolean`	`false`	`[pending]`	Estado del formulario que indica que hay una validación asíncrona pendiente.
`placeholder`	`string`	`''`	`[placeholder]`	Texto que se muestra cuando el campo no tiene un valor seleccionado.
`readonly`	`boolean`	`false`	`[readonly]`	Mantiene visible el valor aplicado, pero impide editarlo.
`required`	`boolean`	`false`	`[required]`	Marca el campo como obligatorio; utiliza un validador del formulario para exigirlo.
`showLabel`	`string`	`'Show'`	`[showLabel]`	Texto accesible de la acción que muestra u oculta la contraseña.
`showStrength`	`boolean`	`false`	`[showStrength]`	Muestra orientación visual sobre la fortaleza; no impone una política de seguridad.
`toggleable`	`boolean`	`true`	`[toggleable]`	Muestra el botón de visibilidad de la contraseña.
`touched`	`boolean`	`false`	`[touched]`	Estado del formulario que indica que el control ha sido visitado.

Models

Un modelo admite [(propiedad)]="signal" o la pareja [propiedad] y (propiedadChange). Elige una de las dos formas, no ambas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`value`	`string`	`''`	`[(value)]`	Valor editable del modelo gestionado por la aplicación.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Nombre	Valor emitido	Uso en el template	Descripción
`touch`	`void`	`(touch)="onTouch($event)"`	Notifica al formulario que el control ha sido visitado; no es un cambio de valor.

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Este componente no expone proyección de contenido ni templates públicos de personalización.

Estilos y tokens

Usa los tokens públicos de la referencia. El diseño del contenedor pertenece a tu aplicación; comprueba el resultado en modo claro y oscuro y en espacios estrechos.

Tokens específicos

Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.

Tokens compartidos utilizados

Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.

Token	Efecto aquí	Otros efectos	Valor / alternativa
`--neu-border`	Bordes normales de controles y celdas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`rgba(15, 23, 42, 0.08)`
`--neu-focus-ring`	Anillo normal del foco de teclado	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`0 0 0 var(--neu-focus-ring-width) rgba(0, 122, 255, 0.15)`
`--neu-primary`	Color de marca en controles activos y énfasis	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#007aff`
`--neu-radius`	Radio de las esquinas del control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`8px`
`--neu-surface`	Superficie principal del campo, cabecera o control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#ffffff`
`--neu-surface-2`	Superficies secundarias y filas alternas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#f1f5f9`
`--neu-surface-3`	Superficies de controles destacados y al pasar el puntero	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#e2e8f0`
`--neu-text`	Color del texto principal y de los iconos que lo heredan	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#0f172a`