ToggleButton is used to select a boolean value using a button.
import { ToggleButtonModule } from 'primeng/togglebutton';
Two-way binding to a boolean property is defined using the standard ngModel directive.
<p-toggleButton [(ngModel)]="checked" onLabel="Yes" offLabel="No"></p-toggleButton>
ToggleButton can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
<form [formGroup]="formGroup">
<p-toggleButton formControlName="checked" onLabel="Yes" offLabel="No"></p-toggleButton>
</form>
Icons and Labels can be customized using onLabel, offLabel, onIcon and offIcon properties.
<p-toggleButton [(ngModel)]="checked" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" [style]="{ width: '10em' }"></p-toggleButton>
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
p-knob | Container element. |
p-knob-text | Text element. |
p-knob-value | Value element. |
p-knob-text | Text element. |
ToggleButton component uses an element with button role and updates aria-pressed state for screen readers. Value to describe the component can be defined with aria-labelledby or aria-label props, it is highly suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label that does not change related to state.
<span id="rememberme">Remember Me</span>
<p-toggleButton aria-labelledby="rememberme"></p-toggleButton>
<p-toggleButton aria-label="Remember Me"></p-toggleButton>
Key | Function |
---|---|
tab | Moves focus to the button. |
space | Toggles the checked state. |
API defines helper props, events and others for the PrimeNG ToggleButton module.
Name | Type | Default | Description |
---|---|---|---|
onLabel | string | null | Label for the on state. |
offLabel | string | null | Label for the off state. |
onIcon | string | null | Icon for the on state. |
offIcon | string | null | Icon for the off state. |
iconPos | string | left | Position of the icon, valid values are "left" and "right". |
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. |
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. |
ariaLabelledBy | string | null | Establishes relationships between the component and label(s) where its value should be one or more element IDs. |
Name | Parameters | Description |
---|---|---|
onChange | event.originalEvent: browser event event.checked: boolean value to represent checked state. | Callback to invoke on state change. |