import InputSwitch from 'primevue/inputswitch';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/inputswitch/inputswitch.min.js"></script>
Two-way binding to a boolean property is defined using the standard v-model directive.
<InputSwitch v-model="checked" />
export default {
data() {
return {
checked: false
}
}
}
As model is two-way binding enabled, setting the bound value as true displays the state as checked by default.
export default {
data() {
return {
checked: true
}
}
}
Any valid attribute is passed to the root element implicitly, extended properties are as follows;
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue | boolean | null | Specifies whether a inputswitch should be checked or not. |
| trueValue | any | null | Value in checked state. |
| falseValue | any | null | Value in unchecked state. |
| inputId | string | null | Style class of the component input field. |
| inputClass | string | null | Style class of the input field. |
| inputStyle | any | null | Inline style of the input field. |
| inputProps | object | null | Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component. |
In addition to the following events, any other valid events such as focus and blur are passed implicitly.
| Name | Parameters | Description |
|---|---|---|
| click | event: Browser event | Callback to invoke on click. |
| change | event: Browser event | Callback to invoke on value change. |
| input | value: New value | Callback to invoke on value change. |
Following is the list of structural style classes, for theming classes visit
| 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 id prop or using aria-labelledby, aria-label props.
<label for="switch1">Remember Me</label>
<InputSwitch inputId="switch1" />
<span id="switch2">Remember Me</span>
<InputSwitch aria-labelledby="switch2" />
<InputSwitch aria-label="Remember Me" />
| Key | Function |
|---|---|
| tab | Moves focus to the switch. |
| space | Toggles the checked state. |
None.