Primitives

Switch

Perform state toggling.

Import

Import the Switch primitives from ng-primitives/switch.

import { NgpSwitch, NgpSwitchThumb } from 'ng-primitives/switch';

Usage

Assemble the switch directives in your template.

<button ngpSwitch [(ngpSwitchChecked)]="checked">
  <span ngpSwitchThumb></span>
</button>

Reusable Component

Create a reusable component that uses the switch directives.

import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Switch } from './switch';

@Component({
  selector: 'app-root',
  imports: [Switch, FormsModule],
  template: `
    <app-switch [(ngModel)]="checked" aria-label="Toggle Switch" />
  `,
})
export default class App {
  checked = signal(true);
}

Schematics

Generate a reusable switch component using the Angular CLI.

ng g ng-primitives:primitive switch

Options

  • path: The path at which to create the component file.
  • prefix: The prefix to apply to the generated component selector.
  • componentSuffix: The suffix to apply to the generated component class name.
  • fileSuffix: The suffix to apply to the generated component file name. Defaults to component.
  • exampleStyles: Whether to include example styles in the generated component file. Defaults to true.

Examples

Here are some additional examples of how to use the Switch primitives.

Switch Form Field

The switch automatically integrates with the form field primitives.

API Reference

The following directives are available to import from the ng-primitives/switch package:

NgpSwitch

Apply the `ngpSwitch` directive to an element to manage the checked state.

  • Selector: [ngpSwitch]
  • Exported As: ngpSwitch
ngpSwitchChecked
boolean
default: "false"

Determine if the switch is checked.

ngpSwitchDisabled
boolean
default: "false"

Determine if the switch is disabled.

ngpSwitchCheckedChange
boolean

Emits when the checked state changes.

Data Attributes

The following data attributes are applied to the ngpSwitch directive:

Attribute Description
data-checked Applied when the switch is checked.
data-disabled Applied when the switch is disabled.
data-hover Applied when the switch is hovered.
data-focus-visible Applied when the switch is focused.
data-press Applied when the switch is pressed.

NgpSwitchThumb

Apply the `ngpSwitchThumb` directive to an element within a switch to represent the thumb.

  • Selector: [ngpSwitchThumb]

Data Attributes

The following data attributes are available to style the thumb:

Attribute Description
data-checked Applied when the switch is checked.
data-disabled Applied when the switch is disabled.
data-hover Applied when the switch thumb is hovered.
data-focus-visible Applied when the switch thumb is focused.
data-press Applied when the switch thumb is pressed.

Accessibility

Adheres to the WAI-ARIA switch design pattern.

Keyboard Interactions

  • Space - Toggle the switch state.
  • Enter - Toggle the switch state.

Copyright © 2025 Angular Primitives