Simple Lightweight Customizable OnOff Toggle Vue.js 2


Vue OnOff Toggle is a simple and lightweight on/off toggle component made with Vue.js. Provides multiple themes with default configurations. You can also customize the size, color, and borders.

vue toggle switch button codepen, vue js toggle button example, vue js toggle button not working, vue 3 toggle switch case button

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-onoff-toggle
$ npm i vue-onoff-toggle

1. Import the registration component.

import OnoffToggle from 'vue-onoff-toggle'
new Vue({
  components: {
  data() {
    return {
      checked: false // true

2. Add the toggle component to the application.

<onoff-toggle v-model="checked" />

3. Props available to configure the switch.

value: { type: Boolean, default: false },
theme: { type: String, default: 'default' },
name: { type: String },
disabled: { type: Boolean, default: false },
onColor: { type: String },
offColor: { type: String },
thumbColor: { type: String },
borderColor: { type: String },
width: { type: [Number, String] },
height: { type: [Number, String] },
margin: { type: [Number, String] }

On/off Toggle Component With Multiple Themes, Vue OnOff Toggle Plugin/Github

See Demo And Download

Official Website(devwiz1028): Click Here

This superior jQuery/javascript plugin is developed by devwiz1028. For extra Advanced Usages, please go to the official website.