Checkbox | Neural Native

Import

component.ts

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

Examples

Import ExampleComponent into its parent and place <app-example /> inside your application’s root neu-theme. The preview supplies the device frame and safe areas; use the root setup from Installation in your app.

Make yourself at home

A required acknowledgement enables joining; optional product tips remain independent. Joining shows confirmation in this local example.

View and copy the complete example

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">Make yourself at home</text><text class="product-caption">A thoughtful start for your workspace</text></view>
    <neu-card title="Join Neural Studio" description="Your team is ready to welcome you." variant="outlined"><view class="product-section">
    <neu-checkbox label="I have read the workspace guidelines" [(checked)]="accepted" />
    <neu-checkbox label="Send me occasional product tips" [(checked)]="tips" />
    <view class="product-actions"><neu-button label="Join workspace" size="sm" [disabled]="!accepted()" (pressed)="joined.set(true)" /></view>
    @if (joined()) { <neu-alert title="Welcome to the team" message="Your local workspace is ready to explore." 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);
}

States and label placement

Compare a left-hand label, a required error and a disabled option.

View and copy the complete example

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="Send a copy to me" labelPosition="left" [(checked)]="sendCopy" />
    <neu-checkbox label="Required approval" [(checked)]="requiredApproval" [invalid]="!requiredApproval()" [touched]="true" error="Approval is required to continue." />
    <neu-checkbox label="Managed by your team" [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);
}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

Checkbox · android · native capture — **Android**Native screenshot

Checkbox · ios · native capture — **iOS**Native screenshot

API reference

Inputs

Name	Type	Default	Binding	Description
label	string	Required	Input	Human-readable name for the control, action or group.
labelPosition	"left" \| "right"	'right'	Input	Place the visible label on the left or right of the control in a left-to-right layout; the row mirrors with the layout direction in RTL. Checkbox defaults to right and Switch to left. The accessible name stays the same.
disabled	boolean	false	Input	Disables user interaction. Values can still be supplied by the application.
readonly	boolean	false	Input	Prevents user editing or selection while retaining the current value.
invalid	boolean	false	Input	Adds a danger-colored outline and displays error when provided. Checked state and editing remain independent of validation.
touched	boolean	false	Input	Field interaction state, supplied manually or through Signal Forms.
error	string	''	Input	Application-provided error message; combine it with the control’s invalid state.

Models

Name	Type	Default	Binding	Description
checked	boolean	false	Model · two-way	Current boolean checked state. Bind a writable signal with [(checked)].

Outputs

Name	Payload	When it emits
checkedChange	boolean	Emits the updated checked value. [(checked)] binds this output together with its model input.
touch	void	Reports user interaction to the surrounding form or application.

Model state

Bind the signal with [(modelName)] without calling it. Use modelName() to read its value.

model-fields.ts

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

// Fields inside your component class
readonly checked = signal<boolean>(false);