@synapse-ui/toggle

Accessible Angular toggle/switch with ControlValueAccessor support and an optional label.

Installation

npm install @synapse-ui/toggle

Usage

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

@Component({
  imports: [Toggle],
  template: ` <synapse-toggle label="Dark mode" (changed)="onToggle($event)" /> `,
})
export class MyComponent {
  onToggle(on: boolean) {
    console.log(on);
  }
}

Inputs

| Input | Type | Default | Description | | ----------- | --------------------- | ----------- | -------------------------------- | | label | string \| undefined | undefined | Visible label next to the toggle | | disabled | boolean | false | Disables the toggle | | ariaLabel | string | 'Toggle' | aria-label for accessibility |

Outputs

| Output | Payload | Description | | --------- | --------- | ------------------------------------- | | changed | boolean | Emitted when the toggle state changes |

Running unit tests

Run nx test toggle to execute the unit tests.