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