Switch | Neural Native

Import

component.ts

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

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.

Notification preferences

Group independent notification settings by source. The enabled count reflects every switch without requiring a save action.

View and copy the complete example

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">Stay in the loop</text><text class="product-caption">Choose what reaches you</text></view>
    <view class="product-surface"><text class="product-heading">From your team</text>
    <neu-switch label="Email updates" hint="Messages from your team" [(checked)]="updates" />
    <neu-switch label="Weekly workspace digest" [(checked)]="digest" />
    <neu-divider /><text class="product-heading">From Neural</text><neu-switch label="Product news" labelPosition="right" [(checked)]="news" /></view>
    <text class="product-caption" accessibilityLiveRegion="polite">{{ [updates(), digest(), news()].filter(enabled).length }} notification channels enabled</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;
}

Sizes

Compare the compact, standard and large sizes.

View and copy the complete example

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="Compact" size="sm" [(checked)]="compact" />
    <neu-switch label="Standard" size="md" [(checked)]="standard" />
    <neu-switch label="Large" 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);
}

Validation and availability

Compare the required error with an organization-managed setting.

View and copy the complete example

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="Required notification channel" [(checked)]="requiredChannel" [invalid]="!requiredChannel()" [touched]="true" error="Select a channel before continuing." />
    <neu-switch label="Organization policy" [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);
}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

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

Switch · 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"	'left'	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.
size	NeuSize	'md'	Input	Visual scale of the native switch: sm is 85%, md is 100% and lg is 115%. Its surrounding target remains at least 48 layout units high. Native shape and intrinsic dimensions may differ between Android and iOS.
hint	string	''	Input	Field guidance shown when no error message is being displayed.
error	string	''	Input	Application-provided error message; combine it with the control’s invalid state.
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	Uses the theme danger color for both on and off tracks. Displays error instead of hint when provided. It does not prevent toggling or calculate a validation rule.
touched	boolean	false	Input	Field interaction state, supplied manually or through Signal Forms.

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);

Types and data interfaces

Use the imports in your application. The definitions below are provided for reference.

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';