Input Otp | Neural Native

Importación

component.ts

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

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.

Un último paso

Escribe, pega, sustituye o borra dígitos y comprueba el valor completo localmente. La demostración no envía SMS ni autentica una cuenta.

Ver y copiar el ejemplo completo

basic.component.ts

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

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuInputOtpComponent, 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">Un último paso</text><text class="product-caption">Mantén tu cuenta en tus manos</text></view>
    <view class="product-surface"><neu-input-otp label="Código de verificación" [length]="6" hint="Introduce seis dígitos para probar este ejemplo local" [(value)]="code" />
    <view class="product-actions"><neu-button label="Comprobar código" size="sm" [disabled]="code().length !== 6" (pressed)="checked.set(code())" /><neu-button label="Empezar de nuevo" size="sm" variant="text" (pressed)="reset()" /></view>
    @if (checked()) { <text class="product-caption" accessibilityLiveRegion="polite">Se han recibido seis dígitos. Una app real los verifica en su servidor.</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 code = signal('');
  readonly checked = signal('');
  reset() { this.code.set(''); this.checked.set(''); }
}

Código de solo lectura

Muestra un código de cuatro dígitos que ya se ha verificado.

Ver y copiar el ejemplo completo

read-only-code.component.ts

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

@Component({
  selector: 'app-example',
  imports: [NeuInputOtpComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-input-otp label="Código verificado" value="1234" [length]="4" [readonly]="true" hint="Un código de cuatro dígitos verificado previamente." />
    </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 code = signal('');
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

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

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

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
length	number	6	Input	Número de posiciones del campo de código de un solo uso.
label	string	Obligatorio	Input	Nombre legible del control, acción o grupo.
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.
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.

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
completed	string	Emite el código numérico cuando una edición completa todas las posiciones. Repetir el mismo valor completo no vuelve a emitirlo. Tu aplicación realiza la verificación.
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>('');