Input | Neural Native

Importación

component.ts

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

Ejemplos

Importa ExampleComponent en su padre y coloca <app-example /> dentro del neu-theme raíz de tu aplicación. El preview aporta el marco y las zonas seguras; utiliza la estructura raíz de Instalación en tu app.

Tu perfil público

Edita un perfil público, compara el identificador de solo lectura y confirma el cambio localmente. La acción se activa solo tras editar.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuInputComponent } from '@neural-ui/native/input';
import { NeuAvatarComponent } from '@neural-ui/native/avatar';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuInputComponent, NeuAvatarComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Tu perfil público</text><text class="product-caption">Ayuda al equipo a reconocerte</text></view>
    <view class="product-surface"><neu-avatar [label]="name() || 'Alex Morgan'" size="lg" />
    <neu-input requiredLabel="Obligatorio" label="Nombre completo" hint="Así te verá tu equipo" [(value)]="name" />
    <neu-input requiredLabel="Obligatorio" label="ID de la cuenta" value="member-104" [readonly]="true" />
    <view class="product-actions"><neu-button label="Actualizar perfil" size="sm" [disabled]="!name().trim() || name() === saved()" (pressed)="saved.set(name())" /></view>
    <text class="product-caption" accessibilityLiveRegion="polite">{{ name() === saved() ? 'El perfil está actualizado' : 'Tienes cambios sin guardar' }}</text></view></view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }

  `,
})
export class ExampleComponent {
  readonly name = signal('Alex Morgan');
  readonly saved = signal('Alex Morgan');
}

Validación y campos desactivados

Añade @ para eliminar el error de correo del ejemplo y compara el campo desactivado.

Ver y copiar el ejemplo completo

validation-and-unavailable-fields.component.ts

import { Component, signal } from '@angular/core';
import { NeuInputComponent } from '@neural-ui/native/input';
import { View, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuInputComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-input requiredLabel="Obligatorio" label="Correo de invitación" keyboardType="email-address" [(value)]="invitationEmail" [invalid]="invitationEmail().length > 0 && !invitationEmail().includes('@')" [touched]="true" error="Introduce una dirección de correo que incluya @." placeholder="alex@example.com" />
    <neu-input requiredLabel="Obligatorio" label="Gestionado por tu organización" value="Cuenta del espacio de trabajo" [disabled]="true" />
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {
  readonly invitationEmail = signal('alex');
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Input · android · native capture — **Android**Captura nativa

Input · ios · native capture — **iOS**Captura nativa

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
keyboardType	"default" \| "email-address" \| "numeric" \| "phone-pad"	'default'	Input	Distribución de teclado solicitada a la plataforma. No sustituye una regla de validación.
label	string	Obligatorio	Input	Nombre legible del control, acción o grupo.
placeholder	string	''	Input	Ejemplo o indicación mientras el valor está vacío; conserva una etiqueta independiente.
hint	string	''	Input	Ayuda del campo que aparece cuando no se muestra un mensaje de error.
required	boolean	false	Input	Presentación de campo obligatorio. Define la regla de validación real en el formulario de tu aplicación.
requiredLabel	string	'Required'	Input	Requisito traducido que se anuncia con la ayuda cuando required es true. Required por defecto; no valida el valor.
error	string	''	Input	Mensaje de error aportado por la aplicación; combínalo con el estado invalid del control.
disabled	boolean	false	Input	Desactiva la interacción del usuario. La aplicación puede seguir proporcionando valores.
readonly	boolean	false	Input	Impide editar o seleccionar desde el control y conserva el valor actual.
invalid	boolean	false	Input	Marca el control como inválido. El formulario o la aplicación aporta la regla de validación.
touched	boolean	false	Input	Estado de interacción con el campo, aportado manualmente o mediante Signal Forms.
maxLength	number \| undefined	undefined	Input	Longitud máxima de texto admitida: un entero no negativo. Cero impide introducir caracteres; undefined deja el límite sin definir. Los negativos se normalizan a cero y los decimales se truncan. Esta propiedad del control también funciona sin Angular Forms.

Models

Nombre	Tipo	Predeterminado	Enlace	Descripción
value	string	''	Model · bidireccional	Valor editado o ID(s) seleccionado(s), según el tipo declarado. Enlaza una signal escribible mediante [(value)].

Outputs

Nombre	Payload	Cuándo se emite
valueChange	string	Emite el valor actualizado de value. [(value)] enlaza este output junto con su input model.
touch	void	Comunica la interacción del usuario al formulario o aplicación que lo contiene.

Estado de los models

Enlaza la signal con [(nombreModel)] sin llamarla. Utiliza nombreModel() para leer su valor.

model-fields.ts

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

// Fields inside your component class
readonly value = signal<string>('');