vuejs-toggle-switch

Toggle switch for vue.js
v3.0.6

Live demo

v3.0.6 Tested OK for Vue v3.2.47 16.05.2023 :white_check_mark:
v2.0.0 Tested OK for Vue v2.6.14 16.05.2023 :white_check_mark:

Support for Vue 2 has ended and will not be continued, previous versions (2.X.X) support Vue 2. Vue 2 will reach End of Life (EOL) on December 31st, 2023. Vue 2 EOL Versions after 3.0.0 will only be tested against Vue 3.

Do you have questions or problems? Use the "Issues" section :point_left:

Setup

install:

npm install vuejs-toggle-switch --save

Import:

import { ToggleSwitch } from 'vuejs-toggle-switch'

Usage

Use: (in your local .vue file/component, html section)

<toggle-switch
  :options="myOptions"
  :disabled="false" // optional, can use here on top level or in config section
  @change="updateMap($event.value)" // This is optional
  @selected="selectedMethod()" // This is optional
  v-model="selectedMapOption" // This is optional 2-way binding (try not to use both 1-way and 2-way)
  :modelValue="selectedMapOption" // This is optional 1-way binding (try not to use both 1-way and 2-way)
  :name="name" // This is optional for input block
  :group="switchGroup" // This is optional, use if multiple toggle-switch on same page with same label names
  /> 

<!-- Options struct: -->
myOptions: {
  layout: {
    color: 'black',
    backgroundColor: 'lightgray',
    selectedColor: 'white',
    selectedBackgroundColor: 'green',
    borderColor: 'black',
    fontFamily: 'Arial',
    fontWeight: 'normal',
    fontWeightSelected: 'bold',
    squareCorners: false,
    noBorder: false
  },
  size: {
    height: 2,
    width: 16,
    padding: 0.4,
    fontSize: 1
  },
  config: {
    preSelected: 'On',
    disabled: false,
    items: [
        { name: 'Off', value: 'Off', color: 'white', backgroundColor: 'red' },
        { name: 'On', value: 'On', color: 'white', backgroundColor: 'green' }
    ]
  }
},

Properties

Labels prop can be used with or without color and backgroundColor attr, if not used the common prop: selectedColor and selectedBackgroundColor will be used for all labels.

Events