Input - InputSwitch - 《PrimeNG Document》

Documentation
Source

InputSwitchInputSwitch is used to select a boolean value.

Documentation

Import


import {InputSwitchModule} from 'primeng/inputswitch';

Getting Started

Two-way binding to a boolean property is defined using the standard ngModel directive.


<p-inputSwitch [(ngModel)]="checked"></p-inputSwitch>


export class ModelComponent {
    checked: boolean;
}

As model is two-way binding enabled, setting the bound value as true displays the state as checked by default.


export class ModelComponent {
   checked: boolean = true;
}

Model Driven Forms

InputSwitch can be used in a model driven form as well.


<p-inputSwitch formControlName="enabled"></p-inputSwitch>

Properties

Name	Type	Default	Description
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.
tabindex	number	null	Index of the element in tabbing order.
inputId	string	null	Identifier of the input element.
name	string	null	Name of the input element.
disabled	boolean	false	When present, it specifies that the element should be disabled.
readonly	boolean	false	When present, it specifies that the component cannot be edited.

Events

Name	Parameters	Description
onChange	event.originalEvent: browser event event.checked: checked state as a boolean	Callback to invoke on state change.


<p-inputSwitch (onChange)="handleChange($event)" [(ngModel)]="val">


export class ModelComponent {
    handleChange(e) {
        let isChecked = e.checked;
    }
}

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
ui-inputswitch	Container element.
ui-inputswitch-checked	Container element in active state.
ui-inputswitch-slider	Slider element behind the handle.

Dependencies

None.

Source

View on GitHub


<h3 class="first">Basic - {{checked1}}</h3>
<p-inputSwitch [(ngModel)]="checked1"></p-inputSwitch>
<h3>Labels - <span> {{checked2}}</h3>
<p-inputSwitch [(ngModel)]="checked2"></p-inputSwitch>


export class InputSwitchDemo {
    checked1: boolean = false;
    checked2: boolean = true;
}