🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Yet another Vue.js component to create iOS-style switches & toggle buttons in your app.

Form

Documentation

vue-simple-switch

Install:

npm i -S vue-simple-switch

Component Example:

<template> <div id="app">     <vue-simple-switch v-model="isSwitchedOn" /> </div> </template>  <script> import VueSimpleSwitch from 'vue-simple-switch'  export default {   name: 'app',   components: {     VueSimpleSwitch   },   data () {     return {       isSwitchedOn: true     }   } } </script>

Available props:

Prop Name Type Default Value Prop Description
value Boolean false 1-way databinding
color String #5d9cec Set switch color
disabled Boolean false Set disabled
readonly Boolean false Set readonly. Use in combination with :value prop, not v-model
required Boolean false Set required

More examples:

<vue-simple-switch v-model="isSwitchedOn1" /> <vue-simple-switch :value="isSwitchedOn2" /> <vue-simple-switch :value="isSwitchedOn3" readonly /> <vue-simple-switch v-model="isSwitchedOn4" disabled /> <vue-simple-switch v-model="isSwitchedOn5" color="#ff902b" required />

Live Demo


You May Also Like