InputSwitch

InputSwitch is used to select a boolean value.


import { InputSwitchModule } from 'primeng/inputswitch';

Two-way value binding is defined using ngModel.


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

InputSwitch can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.


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

Enabling ngModel property displays the component as active initially.


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

When disabled is present, the element cannot be edited and focused.


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

Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.


<p-inputSwitch [(ngModel)]="checked" class="ng-dirty ng-invalid"></p-inputSwitch>

NameElement
p-inputswitchContainer element.
p-inputswitch-checkedContainer element in active state.
p-inputswitch-sliderSlider element behind the handle.

Screen Reader

InputSwitch component uses a hidden native checkbox element with switch role internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy, ariaLabel props.


<label for="switch1">Remember Me</label>
<p-inputSwitch inputId="switch1"></p-inputSwitch>

<span id="switch2">Remember Me</span>
<p-inputSwitch ariaLabelledBy="switch2"></p-inputSwitch>

<p-inputSwitch ariaLabel="Remember Me"></p-inputSwitch>

Keyboard Support

KeyFunction
tabMoves focus to the switch.
spaceToggles the checked state.