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
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]
• Exported As: ngpSwitchThumb
• Host Directives: NgpHover, NgpFocusVisible, NgpPress

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.