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

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

Preselection #

Enabling ngModel property displays the component as active initially.



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

Disabled #

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



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

Style #

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

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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 aria-labelledby, aria-label props.


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

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

<p-inputSwitch aria-label="Remember Me"></p-inputSwitch>

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.

Properties #

Name	Type	Default	Description
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 input element.
name	string	null	Name of the input element.
ariaLabelledBy	string	null	Establishes relationships between the component and label(s) where its value should be one or more element IDs.
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	null	Value in checked state.
falseValue	any	null	Value in unchecked state.
ariaLabel	string	null	Used to define a string that autocomplete attribute the current element.

Events #

Name	Parameters	Description
onChange	event.originalEvent: browser event event.checked: checked state as a boolean	Callback to invoke on state change.