Vue 3 Toggle

Sponsors

About Vueform

Vueform is a comprehensive form builder for Vue.js that makes form development a breeze. It standardizes and handles the entire form building process, including:

• a complete theming and templating system with Tailwind support (similar to @vueform libraries)
• 25+ form elements with multi-file uploads, date pickers and rich text editor
• element nesting and repeating
• 50+ validators with async, dependent and custom rules
• conditional logic on element & form level
• breaking forms into steps with form wizard
• dynamic form rendering with JSON support
• translating form content and global i18n support.

Vueform pre-release is open for registration for the first 100 developers with special discounts.

Learn more: https://vueform.com

Other libraries

• @vueform/multiselect - Vue 3 multiselect component with single select, multiselect and tagging options.
• @vueform/slider - Vue 3 slider component with multihandles, tooltips merging and formatting.

Toggle features

• Vue 2 & 3 support
• No dependencies
• Lightweight (<2 kB gzipped)
• 100% coverage
• TypeScript support
• Accessibility support
• ESM support
• CSS vars support
• Tailwind & utility class support
• On / Off labels

Demo

Check out our demo.

Installation

npm install @vueform/toggle

Usage with Vue 3

<template>
  <div>
    <Toggle v-model="value" />
  </div>
</template>

<script>
  import Toggle from '@vueform/toggle'

  export default {
    components: {
      Toggle,
    },
    data() {
      return {
        value: true
      }
    }
  }
</script>

<style src="@vueform/toggle/themes/default.css"></style>

Using with Vue 2

<template>
  <div>
    <Toggle v-model="value" />
  </div>
</template>

<script>
  import Toggle from '@vueform/toggle/toggle.vue2.js'

  export default {
    components: {
      Toggle,
    },
    data() {
      return {
        value: true
      }
    }
  }
</script>

<style src="@vueform/toggle/themes/default.css"></style>

Using with < Vue 2.7

Switch to <= 2.0.2 to use the Toggle with Vue.js < 2.7.

Support

Join our Discord channel or open an issue.

Basic props

Events

Slots

Styling with CSS vars

The following CSS variables can be used to customize toggle when using default.css:

--toggle-width: 3rem;
--toggle-height: 1.25rem;
--toggle-border: 0.125rem;
--toggle-font-size: 0.75rem;
--toggle-duration: 150ms;
--toggle-bg-on: #10b981;
--toggle-bg-off: #e5e7eb;
--toggle-bg-on-disabled: #d1d5db;
--toggle-bg-off-disabled: #e5e7eb;
--toggle-border-on: #10b981;
--toggle-border-off: #e5e7eb;
--toggle-border-on-disabled: #d1d5db;
--toggle-border-off-disabled: #e5e7eb;
--toggle-ring-width: 3px;
--toggle-ring-color: #10B98130;
--toggle-text-on: #ffffff;
--toggle-text-off: #374151;
--toggle-text-on-disabled: #9ca3af;
--toggle-text-off-disabled: #9ca3af;
--toggle-handle-enabled: #ffffff;
--toggle-handle-disabled: #f3f4f6;

Override them globally:

:root {
  --toggle-bg-on: red;
  --toggle-border-on: red;
}

Or on an instance level:

<Toggle v-model="value" class="toggle-red" />
<Toggle v-model="value" class="toggle-blue" />

.toggle-red {
  --toggle-bg-on: red;
  --toggle-border-on: red;
}

.toggle-blue {
  --toggle-bg-on: blue;
  --toggle-border-on: blue;
}

Styling with Tailwind CSS

The Toggle component accepts a classes property which allows to override default class names. When using utility classes you don't need to import default.css. Here's a default styling for Tailwind CSS:

<Toggle v-model="value" :classes="{
  container: 'inline-block rounded-full outline-none focus:ring focus:ring-green-500 focus:ring-opacity-30',
  toggle: 'flex w-12 h-5 rounded-full relative cursor-pointer transition items-center box-content border-2 text-xs leading-none',
  toggleOn: 'bg-green-500 border-green-500 justify-start text-white',
  toggleOff: 'bg-gray-200 border-gray-200 justify-end text-gray-700',
  toggleOnDisabled: 'bg-gray-300 border-gray-300 justify-start text-gray-400 cursor-not-allowed',
  toggleOffDisabled: 'bg-gray-200 border-gray-200 justify-end text-gray-400 cursor-not-allowed',
  handle: 'inline-block bg-white w-5 h-5 top-0 rounded-full absolute transition-all',
  handleOn: 'left-full transform -translate-x-full',
  handleOff: 'left-0',
  handleOnDisabled: 'bg-gray-100 left-full transform -translate-x-full',
  handleOffDisabled: 'bg-gray-100 left-0',
  label: 'text-center w-8 border-box whitespace-nowrap select-none',
}" />

Certain classes has different states which are merged to the base class when the state is active. For example handle will be merged with handleOn when the toggle is on and not disabled resulting in the following classes: inline-block bg-white w-5 h-5 top-0 rounded-full absolute transition-all left-full transform -translate-x-full

The same is true for toggle.

In case you need to override the same type of utility you might use @neojp/tailwind-important-variant and use eg. bg-green-500!.

Accessibility

By default the on and off labels are being read by the screenreaders. If you provide the labelledby property that will be read instead of the labels. You might also add a describedby property to provide further description.

<div>
  <label id="toggle-label">Turn on notifications</label>
  <Toggle v-model="value" labelledby="toggle-label" describedby="toggle-description" />
</div>
<small id="toggle-description">Turn this on if you'd like to receive in-app notifications.</small>

Examples

• Default toggle
• Toggle with labels
• Toggle with custom values
• Toggle with custom labels

Default toggle

<Toggle
  v-model="value"
/>

JSFiddle - Example #1

Toggle with labels

<Toggle
  v-model="value"
  on-label="On"
  off-label="Off"
/>

JSFiddle - Example #2

Toggle with custom value

<Toggle
  v-model="value"
  true-value="on"
  false-value="off"
/>

JSFiddle - Example #3

Toggle with custom labels

<Toggle
  v-model="value"
>
  <template v-slot:label="{ checked, classList }">
    <span :class="classList.label">{{ checked ? 'On' : 'Off' }}</span>
  </template>
</Toggle>

JSFiddle - Example #4

License

MIT