Vue3 InputSwitch

Vue InputSwitch is used to select a boolean value. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import InputSwitch from 'primevue/inputswitch';

Getting Started

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
        }
    }
}

Theming

InputSwitch supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue InputSwitch showcase for demos and documentation.