A Highly Customizable And Accessible Toggle Switch Component For Vue

accessible-toggle-switch-component

Vue Toggles is a highly customizable and accessible toggle with SSR support!

toggle button accessibility example, css accessible toggle switch, toggle button without checkbox, toggle button example, accessible switch component

How to make use of it:

Install and download:

# NPM
$ npm install vue-toggles --save

1. Import the component.

import Vue from 'vue';
import VueToggles from 'vue-toggles';

2. Register the component.

Vue.component('VueToggles', VueToggles);

3. Add the <VueToggles /> component to the template.

<VueToggles
  @click="value = !value"
  :value="value"
/>

4. Configure the switch using the following props.

value: {
  type: Boolean,
  default: false,
},
disabled: {
  type: Boolean,
  default: false,
},
reverse: {
  type: Boolean,
  default: false,
},
checkedText: {
  type: String,
  default: null,
},
uncheckedText: {
  type: String,
  default: null,
},
width: {
  type: [Number, String],
  default: 75,
},
height: {
  type: [Number, String],
  default: 25,
},
uncheckedBg: {
  type: String,
  default: '#939393',
},
checkedBg: {
  type: String,
  default: '#5850ec',
},
dotColor: {
  type: String,
  default: '#fff',
},
fontSize: {
  type: [Number, String],
  default: '12',
},
checkedColor: {
  type: String,
  default: '#fff',
},
uncheckedColor: {
  type: String,
  default: '#fff',
},
fontWeight: {
  type: [Number, String],
  default: 'normal',
},

Accessible Toggle Switch Component For Vue, Vue Toggles Plugin/Github, toggle button keyboard


See Demo And Download

Official Website(juliandreas): Click Here

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