InputSwitch InputSwitch is used to select a boolean value.

Basic - {{checked1}}

Labels - {{checked2}}

Import


import {InputSwitch} from 'primeng/primeng';

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 by defining ngFormControl or ngControl.


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

Customization

Labels can be customized using onLabel and offLabel properties.


<p-inputSwitch onLabel="I confirm" offLabel="I reject" [(ngModel)]="val"></p-inputSwitch>

Attributes

Name Type Default Description
onLabel string On Label for the on state.
offLabel string Off Label for the off state.
style string null Inline style of the component.
styleClass string null Style class of the component.

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) {
        var 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-on Checked state element.
ui-inputswitch-off Unchecked state element.

Dependencies

Native component that requires the css of PrimeUI Switch.


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

<h3>Labels - <span> {{checked2}}</h3>
<p-inputSwitch onLabel="Yes" offLabel="No" [(ngModel)]="checked2"></p-inputSwitch>


export class InputSwitchDemo {

    checked1: boolean = false;

    checked2: boolean = true;
}