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 ✅
v2.0.0 Tested OK for Vue v2.6.14 16.05.2023 ✅

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 👈

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

Name	Type	Default	Description
width	Number	10	Width of labels
height	Number	3.25	Height
padding	Number	0.5	Adjust text location in item with this
backgroundColor	String	lightgray	Background color (not selected)
color	String	black	Text color (not selected)
borderColor	String	gray	border color
selectedColor	String	white	Text color selected item
selectedBackgroundColor	String	green	Selected item background color
fontFamily	String	Arial	Font of item text
fontWeight	String	normal	Font weight item (not selected)
fontWeightSelected	String	bold	Font weight selected item
fontSize	Number	1.5	Text size
disabled	Boolean	false	Disable switch
preSelected	String	On	Set (pre) selected item
items	Array	Off/On	Items for switch, name and value (string) mandatory
modelValue	String	n/a	Value, ie: v-model="selectedMapOption"
squareCorners	Boolean	false	Rounded corners of switch
noBorder	Boolean	false	Remove border
group	String	''	Switch key/group name (optional)
name	String	''	Name for input field (optional) can be used as ref for forms etc
disabled (prop)	Boolean	false	Disable switch on top level (prop)

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

Name	Description
change	Triggered on toggle, user selects switch option, returns current value. @change="vmValueItem = $event.value"
selected	Triggered whenever user select switch item
input	Triggered on mount if preSelected is set or value is set, and on toggle/change