Vue Toggles

A highly customizable and accessible toggle. Now with SSR support!

Demo

Introduction

Vue Toggles comes out of the box with accessibility support for:

aria-checked depending on state
aria-readonly if the toggle is disabled
prefers-reduced-motion if the user has requested any type of motion reduction [prefers-reduced-motion]

Accessibility

What's left for you, when it comes to accessibility, is labeling the toggle correctly. This is either done by:

A <label for="example-id">Toggle description</label> followed by the toggle component <VueToggles id="example-id" />
An aria-label, for example <VueToggles aria-label="Toggle description" />. Remember, you still need a visual text description of what the toggle does

The focus-style is also left up to you — which is recommended you don't remove. If you think the default is ugly, style it yourself!

Installation

npm i vue-toggles

Import

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

Vue.component('VueToggles', VueToggles);

SSR import (Nuxt for example)

import Vue from 'vue';
import VueToggles from 'vue-toggles/dist/vue-toggles.ssr';
import 'vue-toggles/dist/vue-toggles.ssr.css';

Vue.component('VueToggles', VueToggles);

Usage

The toggle is very easy to use out of the box. The bare minimum for it to work is a @click-function and a :value-prop.

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

Options

You can also add more props to customize things like color and width/height.

<VueToggles
  @click="value = !value"
  :value="value"
  height="30"
  width="90"
  checkedText="On"
  uncheckedText="Off"
  checkedBg="#b4d455"
  uncheckedBg="lightgrey"
/>

Properties

Name	Type	Default	Description
value	Boolean	`false`	Initial state of the toggle button
disabled	Boolean	`false`	Toggle does not react on mouse or keyboard events
reverse	Boolean	`false`	Reverse toggle to Right to Left
height	[String, Number]	`25`	Height of the toggle in `px`
width	[String, Number]	`75`	Width of the toggle in `px`
checkedText	String	`null`	Optional text when the toggle is checked
uncheckedText	String	`null`	Optional text when the toggle is unchecked
checkedBg	String	`#5850ec`	Background color when the toggle is checked
uncheckedBg	String	`#939393`	Background color when the toggle is unchecked
checkedColor	String	`#ffffff`	Text color when the toggle is checked
uncheckedColor	String	`#ffffff`	Text color when the toggle is unchecked
dotColor	String	`#ffffff`	Color of the toggle dot
fontSize	[String, Number]	`12`	Font size in `px`
fontWeight	[Number, String]	`normal`	Font weight

Browser compatibility

Chrome: 40+
Firefox: 25+
Safari: 10+
IE: 11+

License

MIT

albasheer0/vue-toggles