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>
Name | Element |
---|---|
p-inputswitch | Container element. |
p-inputswitch-checked | Container element in active state. |
p-inputswitch-slider | Slider element behind the handle. |
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>
Key | Function |
---|---|
tab | Moves focus to the switch. |
space | Toggles the checked state. |
API defines helper props, events and others for the PrimeNG InputSwitch module.
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. |
Name | Parameters | Description |
---|---|---|
onChange | event.originalEvent: browser event event.checked: checked state as a boolean | Callback to invoke on state change. |