InputSwitch

InputSwitch is used to select a boolean value.

Import #


import { InputSwitchModule } from 'primeng/inputswitch';

Basic #

Two-way value binding is defined using ngModel.


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

Reactive Forms #

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" />

Preselection #

Enabling ngModel property displays the component as active initially.


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

Invalid #

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" />

Disabled #

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


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

Style #

Name	Element
p-inputswitch	Container element.
p-inputswitch-checked	Container element in active state.
p-inputswitch-slider	Slider element behind the handle.

Accessibility #

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" />

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

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

Keyboard Support

Key	Function
tab	Moves focus to the switch.
space	Toggles the checked state.

InputSwitch API

API defines helper props, events and others for the PrimeNG InputSwitch module.

InputSwitch #

InputSwitch is used to select a boolean value.

Properties #

Defines the input properties of the component.

name	type	default	description
style	Object	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 input element.
name	string	null	Name of the input element.
disabled	boolean	false	When present, it specifies that the element should be disabled.
readonly	boolean	false	When present, it specifies that the component cannot be edited.
trueValue	any	true	Value in checked state.
falseValue	any	false	Value in unchecked state.
ariaLabel	string	null	Used to define a string that autocomplete attribute the current element.
ariaLabelledBy	string	null	Establishes relationships between the component and label(s) where its value should be one or more element IDs.
autofocus	boolean	false	When present, it specifies that the component should automatically get focus on load.

Emitters #

Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.

name	parameters	description
onChange	event : InputSwitchChangeEvent	Callback to invoke when the on value change.

Events #

Defines the custom events used by the component's emitters.

InputSwitchChangeEvent #

Custom change event.

name	type	description
originalEvent	Event	Browser event.
checked	boolean	Checked state.