Input

Visión general

NeuInput envuelve un input nativo de una línea. Su modelo público value pertenece a la aplicación o a FormField; label, hint, size y la presentación opcional de iconos son inputs, no un motor de validación.

Modelo de valor básico

Conecta value a un signal y añade una etiqueta. Al escribir se actualiza el signal; al cambiar el signal se actualiza el campo.

Configurador

Configura el tipo, el tamaño, la etiqueta flotante, el placeholder y el texto de ayuda. Prueba los estados de interacción y validación; el template generado refleja tus ajustes.

""

<neu-input
  [(value)]="text"
  label="Nombre del cliente"
  type="text"
  size="md"
  [floatingLabel]="true"
/>

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

export const text = signal("");

Deshabilitado y solo lectura

Disabled elimina el input nativo del foco de teclado y bloquea la edición. Readonly lo mantiene enfocable y legible, pero impide editar; no equivale a disabled. Aquí son inputs directos del componente, fuera de FormField.

Signal Forms

Conecta FormField al control y define la validación en el esquema del formulario. En este ejemplo puedes editar, validar y restablecer el mismo campo, incluidos sus estados deshabilitado y de solo lectura.

Fundamento de Signal Forms · Propiedad del estado

Validación y estado de error

El esquema de Angular decide la validez; NeuInput solo representa invalid/errors recibidos y un errorMessage explícito. Aplica aria-invalid y enlaza el error visible o la ayuda mediante aria-describedby. La demo muestra el mensaje tras interactuar; no atribuye al componente la validación minLength.

Propiedad del modelo y eventos

Usa [(value)] para editar en ambos sentidos, o [value] junto con (valueChange) si necesitas un manejador explícito. El evento touch informa de la pérdida de foco; no contiene el valor del campo.

Accesibilidad y teclado

Core asocia la etiqueta al campo nativo, conecta la ayuda y el error y refleja los estados deshabilitado, de solo lectura, obligatorio y no válido. La edición por teclado sigue siendo nativa.

Tu aplicación proporciona una etiqueta clara, reglas de validación y un errorMessage comprensible. Usa valores inputId distintos si asignas los identificadores manualmente.

Fundamento de accesibilidad

API

value admite enlace bidireccional. touch informa de la pérdida de foco. Los inputs configuran el campo y el estado del formulario que muestra; las tablas indican los tipos, valores por defecto y sintaxis.

Inputs

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

Models

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

Outputs

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

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

import type { NeuInputType } from '@neural-ui/core/input';

// Declaración pública (solo referencia)
export type NeuInputType = 'text' | 'email' | 'password' | 'tel' | 'url' | 'search';

Tematización

Los tokens públicos --neu-input-* siguientes personalizan el fondo, el borde y el foco. La tipografía, el radio y los colores compartidos proceden del tema global de Core.

Componentes relacionados

Textarea es el compañero de texto multilínea. Checkbox cubre un modelo checked booleano con semántica nativa de casilla.

• Textarea
• Checkbox