Checkbox | Neural UI v2

Overview

NeuCheckbox wraps a native checkbox with a checked model. It is the smallest boolean form control; indeterminate is a separate display input, not a third model value or a RadioGroup selection rule.

Basic checked model

Bind checked to an application signal. User input and programmatic writes stay in sync.

Receive project updates

checked: false

Configurator

Configure the label, checked and indeterminate states, and interaction and validation options. checked is the application value; indeterminate represents a mixed visual state.

Live preview

Receive updates

Current application value

Advanced options · 7

Generated template. The Code tab includes imports and state.

<neu-checkbox
  [(checked)]="checked"
  label="Receive updates"
/>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

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

export const checked = signal(false);

Data, callback and structured configuration inputs

Disabled removes the native checkbox from focus and prevents changes. Readonly remains focusable; Core restores the applied checked model if a user attempts to change it. indeterminate renders mixed state through native and ARIA properties but leaves checked boolean.

Sync reports

checked: false · indeterminate: false

Signal Forms

Connect checked to a boolean FormField. The form schema defines required validation and reset. Try accepting the option and resetting the form.

Signal Forms foundation · State ownership

I accept the example terms

checked: false · touched: false · dirty: false · valid: false

Validation and error state

The form schema, not NeuCheckbox, decides whether consent is valid. Core reflects supplied invalid/errors on the native input through aria-invalid, but this component has no public errorMessage or aria-describedby input. Place explanatory text close to the control and test the composed form's announcement.

Model ownership and events

checked is the editable boolean value. Use [(checked)] or the [checked] and (checkedChange) pair. touch reports blur. indeterminate changes only the mixed-state presentation, not the checked value.

Accessibility and keyboard

Core provides native checkbox semantics, Space activation, mixed-state exposure and disabled/readonly behavior.

Your application provides visible label text or ariaLabel. Place validation feedback near the field; Checkbox has no errorMessage input. Explain what accepting the option means.

Accessibility foundation

Key	Action
`Space`	Toggles an enabled checkbox; readonly reverts the attempted change.
`Tab`	Focuses the native checkbox unless disabled.

API

checked supports two-way binding. indeterminate is a display input, not a third value. touch reports blur; use checkedChange for changes to the boolean value.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`ariaLabel`	`string`	`''`	`[ariaLabel]`	Alternative accessible name for the native checkbox.
`dirty`	`boolean`	`false`	`[dirty]`	Applied dirty state, normally supplied by FormField.
`disabled`	`boolean`	`false`	`[disabled]`	Disables the native checkbox and removes it from focus.
`errors`	`readonly ValidationError.WithOptionalFieldTree[]`	`[]`	`[errors]`	Applied validation errors, normally from the form schema.
`hidden`	`boolean`	`false`	`[hidden]`	Hides the component host.
`indeterminate`	`boolean`	`false`	`[indeterminate]`	Mixed visual/ARIA state; checked remains a boolean model.
`invalid`	`boolean`	`false`	`[invalid]`	Applied invalid flag reflected through aria-invalid.
`label`	`string`	`''`	`[label]`	Visible text naming the native checkbox.
`name`	`string`	`''`	`[name]`	Native form-control name.
`pending`	`boolean`	`false`	`[pending]`	Applied pending state announced through aria-busy.
`readonly`	`boolean`	`false`	`[readonly]`	Keeps focus but Core restores checked after an attempted change.
`required`	`boolean`	`false`	`[required]`	Marks the native checkbox required; the form schema decides validity.
`tabIndex`	`number`	`0`	`[tabIndex]`	Tab order of the native checkbox. The default is 0; use -1 when an accessible composite widget manages keyboard focus.
`touched`	`boolean`	`false`	`[touched]`	Applied touched state, normally supplied by FormField.

Models

A model supports [(property)]="signal" or the [property] and (propertyChange) pair. Choose one form, not both.

Name	Type	Default	Template binding	Description
`checked`	`boolean`	`false`	`[(checked)]`	Bidirectional boolean model owned by the application or FormField.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Name	Payload	Template binding	Description
`touch`	`void`	`(touch)="onTouch($event)"`	Lifecycle notification emitted when the checkbox blurs.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

This component does not expose content projection or public customization templates.

Theming

Checkbox has no dedicated public --neu-checkbox-* token. Customize its shared colors with the global Core palette, as explained in the Themes guide.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-primary`	Brand color for active controls and emphasis	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-text`	Main text and inherited icon color	Shared by other Core consumers; scope the override.	`#0f172a`
`--neu-font-sans`	Text typography	Shared by other Core consumers; scope the override.	`'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif`
`--neu-space-3`	Spacing between content and controls	Shared by other Core consumers; scope the override.	`0.75rem`
`--neu-text-sm`	Text size	Shared by other Core consumers; scope the override.	`0.875rem`

Related components

Input and Textarea provide string value models for single-line and multiline text.