Component

Input

Text field with floating label, icons and full Reactive Forms support. Stable IDs for SSR and a11y.

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

Sizes

Small (36px)

Medium (48px, default)

Large (56px)

First name

Last name

Phone

Password

At least 8 characters with letters and numbers

Repository URL

Include https://

Internal icon

Username

Password

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);
}