@vueform/toggle

Vue 3 Toggle

Sponsors

Toggle features

• Vue 2 & 3 support
• No dependencies
• Lightweight (~1 kB gzipped)
• 100% coverage
• ESM support
• Fully configurable
• Dynamic styles
• 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>

Usage with Vue 2

When using with Vue 2 make sure to install @vue/composition-api first and change the imported module to:

import Toggle from '@vueform/toggle/dist/toggle.vue2.js'

Support

Join our Discord channel or open an issue.

Basic props

Name	Type	Default	Description
id	string	toggle	The id attribute of input field. Make sure to customize when using more toggles on a single page.
name	string	toggle	The name attribute of input field.
falseValue	string|number|boolean	false	The value when the toggle is off.
trueValue	string|number|boolean	true	The value when toggle is on.
offLabel	string		The label when toggle is off.
onLabel	string		The label when toggle is on.
width	number	54	The width of the toggle in px.
height	number	24	The height of the toggle in px.
speed	number	300	The speed of toggle switch in milliseconds.
offBackground	string	#d4e0e7	The color of background when toggle is off.
onBackground	string	#41b883	The color of background when toggle is on.
offTextColor	string	#888888	The color of text when toggle is off.
onTextColor	string	#ffffff	The color of text when toggle is on.
handleColor	string	#ffffff	The background color of toggle handle.
fontSize	string	13px	The font size of toggle labels.

Events

Event	Attributes	Description
@change	value	Emitted when the toggle changes.

Slots

Slot	Attributes	Description
off		Rendered when the toggle is off (by default offLabel).
on		Rendered when the toggle is on (by default onLabel).

Examples

• Default toggle
• Toggle with labels
• Toggle with custom styles

Default toggle

<Toggle
  v-model="value"
/>

JSFiddle - Example #1

Toggle with labels

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

JSFiddle - Example #2

Toggle with custom stylesg

<Toggle
  v-model="value"
  font-size="15px"
  on-background="#35495e"
  id="example3"
  :width="80"
  :height="30"
  :speed="500"
/>

JSFiddle - Example #3

About Vueform

Vueform streamlines the entire form building process in Vue 2 & 3. It comes with 30+ elements, file uploads, element nesting, 50+ validators, conditions, form steps, i18n including reactive configuration, API access, ESM modules and many more. Check out our live demos or see all the features and sign up for beta to get early access.

License

MIT