Switch | Neural Native

Importación

component.ts

import { NeuSwitchComponent } from '@neural-ui/native/switch';

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.

Preferencias de notificación

Agrupa las preferencias independientes por origen. El recuento refleja todos los interruptores sin requerir una acción de guardado.

Ver y copiar el ejemplo completo

notification-preferences.component.ts

import { Component, signal } from '@angular/core';
import { NeuSwitchComponent } from '@neural-ui/native/switch';
import { NeuDividerComponent } from '@neural-ui/native/divider';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuSwitchComponent, NeuDividerComponent, 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">Mantente al día</text><text class="product-caption">Elige qué avisos recibes</text></view>
    <view class="product-surface"><text class="product-heading">De tu equipo</text>
    <neu-switch label="Avisos por correo" hint="Mensajes de tu equipo" [(checked)]="updates" />
    <neu-switch label="Resumen semanal del espacio" [(checked)]="digest" />
    <neu-divider /><text class="product-heading">De Neural</text><neu-switch label="Novedades del producto" labelPosition="right" [(checked)]="news" /></view>
    <text class="product-caption" accessibilityLiveRegion="polite">{{ [updates(), digest(), news()].filter(enabled).length }} canales de notificaciones activados</text></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 updates = signal(true);
  readonly digest = signal(true);
  readonly news = signal(false);
  readonly enabled = (value: boolean) => value;
}

Tamaños

Compara los tamaños compacto, estándar y grande.

Ver y copiar el ejemplo completo

sizes.component.ts

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

@Component({
  selector: 'app-example',
  imports: [NeuSwitchComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <view class="usage-section">
    <neu-switch label="Compacto" size="sm" [(checked)]="compact" />
    <neu-switch label="Estándar" size="md" [(checked)]="standard" />
    <neu-switch label="Grande" size="lg" [(checked)]="large" />
    </view>
    </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 compact = signal(true);
  readonly standard = signal(true);
  readonly large = signal(true);
}

Validación y disponibilidad

Compara el error obligatorio con un ajuste gestionado por la organización.

Ver y copiar el ejemplo completo

validation-and-availability.component.ts

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

@Component({
  selector: 'app-example',
  imports: [NeuSwitchComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <view class="usage-section">
    <neu-switch label="Canal de avisos obligatorio" [(checked)]="requiredChannel" [invalid]="!requiredChannel()" [touched]="true" error="Selecciona un canal antes de continuar." />
    <neu-switch label="Política de la organización" [checked]="true" [disabled]="true" />
    </view>
    </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 requiredChannel = signal(false);
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

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

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

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
label	string	Obligatorio	Input	Nombre legible del control, acción o grupo.
labelPosition	"left" \| "right"	'left'	Input	Coloca la etiqueta visible a la izquierda o a la derecha del control en un layout de izquierda a derecha; la fila se refleja con la dirección del layout en RTL. Checkbox usa right y Switch left por defecto. El nombre accesible no cambia.
size	NeuSize	'md'	Input	Escala visual del interruptor nativo: sm es 85%, md es 100% y lg es 115%. Su contenedor conserva al menos 48 unidades de altura. La forma y las dimensiones intrínsecas pueden variar entre Android e iOS.
hint	string	''	Input	Ayuda del campo que aparece cuando no se muestra un mensaje de error.
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	Usa el color danger del tema para la pista encendida y apagada. Muestra error en lugar de hint si se ha proporcionado. No impide cambiar el estado ni calcula una regla de validación.
touched	boolean	false	Input	Estado de interacción con el campo, aportado manualmente o mediante Signal Forms.

Models

Nombre	Tipo	Predeterminado	Enlace	Descripción
checked	boolean	false	Model · bidireccional	Estado booleano de selección actual. Enlaza una signal escribible mediante [(checked)].

Outputs

Nombre	Payload	Cuándo se emite
checkedChange	boolean	Emite el valor actualizado de checked. [(checked)] 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 checked = signal<boolean>(false);

Tipos e interfaces de datos

Utiliza los imports en tu aplicación. Las definiciones siguientes se muestran como referencia.

NeuSize

NeuSize.ts

import type { NeuSize } from '@neural-ui/native/foundation';

// Public definition for reference only. Import this type; do not redeclare it.
export type NeuSize = 'sm' | 'md' | 'lg';