Vue Js Toggle Button

🍥 Vue.js 2 toggle / switch button - simple, pretty, customizable
Alternatives To Vue Js Toggle Button
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
2 months ago492otherC#
Allows the Nintendo Switch Pro Controller, Joycons and SNES controller to be used with CEMU, Citra, Dolphin, Yuzu and as generic XInput
Vuecirclemenu1,170537 years ago7January 25, 201718mitCSS
:rabbit:A beautiful circle menu powered by Vue.js
162 years ago11August 06, 2019mitSwift
Nicely animated flat design switch alternative to UISwitch
Vue Js Toggle Button911175409 months ago22October 26, 201951mitVue
:fish_cake: Vue.js 2 toggle / switch button - simple, pretty, customizable
Shinywidgets76558113a day ago30May 11, 202288gpl-3.0R
shinyWidgets : Extend widgets available in shiny
Unswitch577115 years ago5August 09, 2018mitJavaScript
🕹 A tiny event handler for Switch controllers!
Android Toggle Switch451
4 years ago1mitJava
A customizable extension to Android switches that supports many items.
3 months ago20mitC++
Arduino library for debouncing momentary contact switches, detect press, release, long press and sequences with event definitions and callbacks.
2 years ago1gpl-3.0C++
Arduino library to debounce button switches, detect presses, releases, and long presses
Switch Fightstick293
4 years agootherC
Proof-of-Concept LUFA Project for the Nintendo Switch. Uses reverse-engineering of the Pokken Tournament Pro Pad for the Wii U and Switch System v3.0.0
Alternatives To Vue Js Toggle Button
Select To Compare

Alternative Project Comparisons

Vue.js toggle/switch button.

Get a coffee

Live demo here


npm install vue-js-toggle-button --save


Import plugin:

import ToggleButton from 'vue-js-toggle-button'



Import component:

import { ToggleButton } from 'vue-js-toggle-button'

Vue.component('ToggleButton', ToggleButton)


<toggle-button @change="onChangeEventHandler"/>

<toggle-button v-model="myDataVariable"/>

<toggle-button :value="false"

<toggle-button :value="true"
               :labels="{checked: 'Foo', unchecked: 'Bar'}"/>


Name Type Default Description
value Boolean false Initial state of the toggle button
sync Boolean false If set to true, will be watching changes in value property and overwrite the current state of the button whenever value prop changes
speed Number 300 Transition time for the animation
disabled Boolean false Button does not react on mouse events
color [String, Object] #75C791 If String - color of the button when checked
If Object - colors for the button when checked/unchecked or disabled
Example: {checked: '#00FF00', unchecked: '#FF0000', disabled: '#CCCCCC'}
css-colors Boolean false If true - deactivates the setting of colors through inline styles in favor of using CSS styling
labels [Boolean, Object] false If Boolean - shows/hides default labels ("on" and "off")
If Object - sets custom labels for both states.
Example: {checked: 'Foo', unchecked: 'Bar'}
switch-color [String, Object] #BFCBD9 If String - color or background property of the switch when checked
If Object - colors or background property for the switch when checked/uncheked
Example: {checked: '#25EF02', unchecked: 'linear-gradient(red, yellow)'}
width Number 50 Width of the button
height Number 22 Height of the button
margin Number 3 Space between the switch and background border
name String undefined Name to attach to the generated input field
font-size Number undefined Font size


Name Description
change Triggered whenever state of the component changes.
value - state of the object
srcEvent - source click event
input Input event for v-model


Include plugin in your nuxt.config.js file:

module.exports = {
  plugins: ['~plugins/vue-js-toggle-button']

And your plugins/vue-js-toggle-button.js will look like:

import Vue from 'vue'
import Button from 'vue-js-toggle-button'


Browser compatibility

  • Chrome: 40+
  • Firefox: 25+
  • Safari: 10+
  • IE: 11+
Popular Button Projects
Popular Switch Projects
Popular User Interface Components Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Vue Components
Vue Plugin