Togglebutton ToggleButton is used to select a boolean value using a button.

Basic - ({{checked1}})

Customized - ({{checked2}})

Import


import {ToggleButton} from 'primeng/primeng';

Getting Started

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


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


export class ModelComponent {

    checked: boolean;

}

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


export class ModelComponent {

   checked: boolean = true;

}

Model Driven Forms

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


<p-toggleButton formControlName="agreed"></p-toggleButton>

Customization

Icons and Labels can be customized using onLabel, offLabel, onIcon and OffIcon attributes.


<p-toggleButton onLabel="I confirm" offLabel="I reject" 
        onIcon="fa-check-square" offIcon="fa-square" [(ngModel)]="val"></p-toggleButton>

Attributes

Name Type Default Description
onLabel string yes Label for the on state.
offLabel string no Label for the off state.
onIcon string null Icon for the on state.
offIcon string null Icon for the off state.
style string null Inline style of the element.
styleClass string null Style class of the element.
disabled boolean false When present, it specifies that the element should be disabled.

Events

Name Parameters Description
onChange event.originalEvent: browser event
evebt.checked: boolean value to represent checked state.
Callback to invoke on state change.

<p-toggleButton (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-togglebutton Container element
ui-button-icon-left Icon element.
ui-button-text Label element.

Dependencies

Native component that requires the css of PrimeUI ToggleButton.


<h3 class="first">Basic - ({{checked1}})</h3>
<p-toggleButton [(ngModel)]="checked1" [style]="{'width':'150px'}"></p-toggleButton>

<h3>Customized - ({{checked2}})</h3>
<p-toggleButton [(ngModel)]="checked2" onLabel="I confirm" offLabel="I reject" onIcon="fa-check-square" offIcon="fa-square" [style]="{'width':'150px'}"></p-toggleButton>


export class ToggleButtonDemo {
    
    checked1: boolean = false;

    checked2: boolean = true;
}