Usage #
Examples #
Basic #
Toggles a boolean setting between enabled and disabled states.
Controlled #
A controlled ToggleSwitch manages the checked state with ngModel and handles the change event manually.
Template #
The handle template is available to display custom content.
Customization #
ToggleSwitch supports customization through the pt property. The appearance, including colors and other visual properties, can be modified by applying custom classes.
Invalid #
The invalid state is applied using the invalid property to indicate failed validation, which can be integrated with Angular Forms.
Disabled #
When disabled is present, the element cannot be edited and focused.
Forms #
Signal Forms #
Template Driven #
Reactive Forms #
Accessibility #
Screen Reader
InputSwitch component uses a hidden native checkbox element with switch role internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy, ariaLabel props.
Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to the switch. |
| space | Toggles the checked state. |