Vue Toggles

A highly customizable and accessible toggle component for Vue 3.

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" />
Or 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 you shouldn't remove. If you think the default is ugly, style it yourself!

Installation

npm i vue-toggles

Import component

import { VueToggles } from "vue-toggles";

Import types

import { type VueTogglesProps } from "vue-toggles";

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 :value="example" @click="example = !example" />

Or if you prefer the v-model-syntax:

<VueToggles v-model="example" />

Options

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

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

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`
dotColor	String	`#ffffff`	Color of the toggle dot
uncheckedBg	String	`#939393`	Background color when the toggle is unchecked
checkedBg	String	`#5850ec`	Background color when the toggle is checked
uncheckedTextColor	String	`#ffffff`	Text color when the toggle is unchecked
checkedTextColor	String	`#ffffff`	Text color when the toggle is checked
uncheckedText	String	`""`	Optional text when the toggle is unchecked
checkedText	String	`""`	Optional text when the toggle is checked
fontSize	String	`12`	Font size in `px`
fontWeight	String	`normal`	Font weight

Vue 2 support

If you're looking for Vue 2 support, the 1.1.4version is available here.

License

MIT

juliandreas/vue-toggles