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

Vue 2 support

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

License

MIT