Saltar al contenido principal
NeuralUIv1.14.3Nuevo
GitHub
Componente

Input

Campo de texto con floating label, iconos y soporte completo con Reactive Forms. IDs estables para SSR y a11y.

TypeScript
import { NeuInputComponent } from '@neural-ui/core/input';

Tamaños

Mínimo 8 caracteres con letras y números

Incluye https://

Icono interno

TypeScript
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { NeuInputComponent } from '@neural-ui/core/input';

@Component({
  imports: [NeuInputComponent, ReactiveFormsModule],
  template: `
    <neu-input label="Email" type="email" [formControl]="emailCtrl" />

    <!-- Con Reactive Forms / With Reactive Forms -->
    <neu-input label="Password" type="password" [formControl]="passwordCtrl"
               [errorMessage]="passwordCtrl.hasError('required') ? 'Required' : ''" />

    <!-- Con atributos nativos / With native attributes -->
    <neu-input label="URL" type="url" [required]="true" [maxlength]="200"
               hint="Include https://" />

    <!-- Icono interno (izquierda por defecto) / Internal icon (left by default) -->
    <neu-input label="Search" icon="lucideSearch" />

    <!-- Icono a la derecha / Right icon -->
    <neu-input label="User" icon="lucideUser" iconPosition="right" />

    <!-- Icono combinado con tipo password / Icon combined with password type -->
    <neu-input label="Password" type="password" icon="lucideLock" iconPosition="left" />
  `
})
export class MyFormComponent {
  emailCtrl = new FormControl('', { nonNullable: true });
  passwordCtrl = new FormControl('', Validators.required);
}