Checkbox

Visión general

NeuCheckbox envuelve una casilla nativa con modelo checked. Es el control booleano mínimo; indeterminate es un input de presentación separado, no un tercer valor del modelo ni una regla de selección de RadioGroup.

Modelo checked básico

Enlaza checked con una signal de la aplicación. La interacción y las escrituras desde código quedan sincronizadas.

Configurador

Configura la etiqueta, los estados marcado e indeterminado y las opciones de interacción y validación. checked es el valor de la aplicación; indeterminate representa un estado visual mixto.

false

<neu-checkbox
  [(checked)]="checked"
  label="Recibir novedades"
/>

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

export const checked = signal(false);

Deshabilitado, solo lectura y mixto

Disabled elimina la casilla nativa del foco e impide cambios. Readonly conserva el foco; Core restaura el modelo checked aplicado si se intenta cambiarlo. indeterminate representa el estado mixto mediante propiedades nativas y ARIA, pero checked sigue siendo booleano.

Signal Forms

Conecta checked a un FormField booleano. El esquema del formulario define la validación de campo obligatorio y el restablecimiento. Prueba a marcar la opción y restablecer el formulario.

Fundamento de Signal Forms · Propiedad del estado

Validación y estado de error

El esquema del formulario, no NeuCheckbox, decide si el consentimiento es válido. Core refleja invalid/errors recibidos mediante aria-invalid en el input nativo, pero este componente no expone errorMessage ni aria-describedby. Sitúa el texto explicativo junto al control y prueba el anuncio del formulario compuesto.

Propiedad del modelo y eventos

checked es el valor booleano editable. Usa [(checked)] o la pareja [checked] y (checkedChange). touch informa de la pérdida de foco. indeterminate solo cambia la presentación de estado mixto, no el valor de checked.

Accesibilidad y teclado

Core proporciona la semántica nativa de casilla, la activación con Espacio, el estado mixto y el comportamiento deshabilitado/de solo lectura.

Tu aplicación proporciona una etiqueta visible o ariaLabel. Coloca el mensaje de validación cerca del campo; Checkbox no tiene un input errorMessage. Explica qué implica marcar la opción.

Fundamento de accesibilidad

API

checked admite enlace bidireccional. indeterminate es un input de presentación, no un tercer valor. touch informa de la pérdida de foco; usa checkedChange para los cambios del valor booleano.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Models

Un modelo admite [(propiedad)]="signal" o la pareja [propiedad] y (propiedadChange). Elige una de las dos formas, no ambas.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Tematización

Checkbox no tiene tokens públicos --neu-checkbox-* propios. Personaliza sus colores compartidos con la paleta global de Core, como explica la guía Temas.

Componentes relacionados

Input y Textarea proporcionan modelos de texto para una o varias líneas.

• Input
• Textarea