Checkbox | Neural Native

Importación

component.ts

import { NeuCheckboxComponent } from '@neural-ui/native/checkbox';

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.

Este también es tu espacio

Una aceptación obligatoria habilita la entrada; los consejos opcionales mantienen su estado independiente. Al entrar aparece una confirmación local.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuCheckboxComponent } from '@neural-ui/native/checkbox';
import { NeuCardComponent } from '@neural-ui/native/card';
import { NeuAlertComponent } from '@neural-ui/native/alert';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuCheckboxComponent, NeuCardComponent, NeuAlertComponent, 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">Este también es tu espacio</text><text class="product-caption">Un buen comienzo para tu espacio</text></view>
    <neu-card title="Únete a Neural Studio" description="Tu equipo está listo para recibirte." variant="outlined"><view class="product-section">
    <neu-checkbox label="He leído las normas del espacio" [(checked)]="accepted" />
    <neu-checkbox label="Enviarme consejos ocasionales del producto" [(checked)]="tips" />
    <view class="product-actions"><neu-button label="Unirme al espacio" size="sm" [disabled]="!accepted()" (pressed)="joined.set(true)" /></view>
    @if (joined()) { <neu-alert closeLabel="Cerrar aviso" title="Te damos la bienvenida al equipo" message="Tu espacio local está listo para explorar." tone="success" /> }
    </view></neu-card></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 accepted = signal(false);
  readonly tips = signal(true);
  readonly joined = signal(false);
}

Estados y posición de etiqueta

Compara una etiqueta a la izquierda, un error obligatorio y una opción desactivada.

Ver y copiar el ejemplo completo

states-and-label-placement.component.ts

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

@Component({
  selector: 'app-example',
  imports: [NeuCheckboxComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-checkbox label="Enviarme una copia" labelPosition="left" [(checked)]="sendCopy" />
    <neu-checkbox label="Aprobación obligatoria" [(checked)]="requiredApproval" [invalid]="!requiredApproval()" [touched]="true" error="Debes aprobarlo para continuar." />
    <neu-checkbox label="Gestionado por tu equipo" [checked]="true" [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 sendCopy = signal(true);
  readonly requiredApproval = signal(false);
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

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

Checkbox · 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"	'right'	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.
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	Añade un contorno del color danger y muestra error si se ha proporcionado. El estado marcado y la edición son independientes de la validación.
touched	boolean	false	Input	Estado de interacción con el campo, aportado manualmente o mediante Signal Forms.
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
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);