InputSwitch

InputSwitch is used to select a boolean value.

Import #


import InputSwitch from 'primevue/inputswitch';

Basic #

Two-way value binding is defined using v-model.


<InputSwitch v-model="checked" />

Preselection #

Enabling checked property displays the component as active initially.


<InputSwitch v-model="checked" />

Invalid #

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


<InputSwitch v-model="checked" class="p-invalid" />

Disabled #

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


<InputSwitch v-model="checked" disabled />

Form #

Compatibility with popular Vue form libraries.

VeeValidate #

VeeValidate is a popular library for handling forms in Vue.


<template>
    <div class="card flex justify-content-center">
        <form @submit="onSubmit" class="flex flex-column gap-2">
            <div>I've read and accept the terms & conditions.</div>
            <InputSwitch v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
            <small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
            <Button type="submit" label="Submit" />
        </form>
    </div>
</template>

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

Keyboard Support

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