InputSwitch InputSwitch is used to select a boolean value.

Basic - {{checked1}}

Labels - {{checked2}}

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>

Customization

Labels can be customized using onLabel and offLabel properties.


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

Properties

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.
tabindex	number	null	Index of the element in tabbing order.
inputId	string	null	Identifier of the focus input to match a label defined for the component.
ariaLabelTemplate	string	InputSwitch {0}	The aria-label template is used to define a string that labels the current element with a template.

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

None.

View on GitHub


<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;
}