Toggle

Package: @synapse-ui/toggle Selector: synapse-toggle Status: Stable

An accessible on/off switch that implements ControlValueAccessor for use in Angular forms.

Overview

Toggle renders a native-like switch control using role="switch" semantics. It integrates with both Reactive Forms and Template-driven Forms, emits change events, and supports an optional inline label.

Installation

npm install @synapse-ui/toggle @synapse-ui/theme

Basic Example

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { Toggle } from '@synapse-ui/toggle';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [Toggle, ReactiveFormsModule],
  template: ` <synapse-toggle label="Enable notifications" [formControl]="notificationsControl" /> `,
})
export class DemoComponent {
  notificationsControl = new FormControl(false);
}

API Reference

Inputs

Input	Type	Default	Description
label	string | undefined	undefined	Visible label rendered beside the toggle
disabled	boolean	false	Disables the toggle
ariaLabel	string	'Toggle'	Accessible label used when no visible label is provided

Outputs

Output	Payload	Description
changed	boolean	Emits the new checked state on every toggle

Template-driven Example

import { FormsModule } from '@angular/forms';
import { Toggle } from '@synapse-ui/toggle';

@Component({
  standalone: true,
  imports: [Toggle, FormsModule],
  template: `
    <synapse-toggle label="Dark mode" [(ngModel)]="darkMode" />
    <p>Dark mode is: {{ darkMode ? 'on' : 'off' }}</p>
  `,
})
export class TemplateToggleComponent {
  darkMode = false;
}

Listening to Changes

<synapse-toggle label="Auto-save" (changed)="onAutoSaveChange($event)" />

onAutoSaveChange(enabled: boolean): void {
  console.log('Auto-save:', enabled);
}

Accessibility

• Uses role="switch" on the interactive element.
• aria-checked reflects the current state.
• aria-disabled is set when disabled is true.
• ariaLabel input provides an accessible name when no visible label is used.