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>

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
• Host Directives: NgpFormControl, NgpHover, NgpFocusVisible, NgpPress

Define the checked state. Define the disabled state. Event emitted when the state changes.

Data Attributes

The following data attributes are applied to the ngpSwitch directive:

Attribute	Description	Value
data-checked	The state of the switch.	true | false
data-disabled	The disabled state.	true | false
data-hover	The hover state.	true | false
data-focus-visible	The focus state.	true | false
data-press	The pressed state.	true | false

NgpSwitchThumb

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

• Selector: [ngpSwitchThumb]
• Exported As: ngpSwitchThumb
• Host Directives: NgpHover, NgpFocusVisible, NgpPress

Data Attributes

The following data attributes are available to style the thumb:

Attribute	Description	Value
data-checked	The state of the switch.	true | false
data-disabled	The disabled state.	true | false
data-hover	The hover state.	true | false
data-focus-visible	The focus state.	true | false
data-press	The pressed state.	true | false

Accessibility

Adheres to the WAI-ARIA switch design pattern.

Keyboard Interactions

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