Custom Javascript Vue 3 Toggle Switches Component With Labels

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

Complete form and template design system with Tailwind support (similar to vueform libraries)
25+ form elements with multiple file uploads, date picker, and rich text editor
Overlapping and repetition of elements
50+ validators with asynchronous, dependent, and custom rules
Conditional logic at the element and form level
Split forms into steps using the Form Wizard
Dynamic form rendering with JSON support
Form content translation and global i18n support.

toggle switch javascript, jquery toggle switch with text, css toggle switch with text, toggle switch bootstrap, toggle switch html

How to make use of it:

Install and download:

# Yarn
$ yarn add @vueform/toggle

# NPM
$ npm i @vueform/toggle

1. Import and register the component.

<style src="@vueform/toggle/themes/default.css"></style>
import Toggle from '@vueform/toggle'

export default {
  components: {
    Toggle,
  }
}

2. Add the switch component to the application template.

<Toggle v-model="value" />

3. Configure the switch with the following props.

id: {
  type: [String, Number],
  required: false,
  default: 'toggle'
},
name: {
  type: [String, Number],
  required: false,
  default: 'toggle'
},
disabled: {
  type: Boolean,
  required: false,
  default: false,
},
required: {
  type: Boolean,
  required: false,
  default: false,
},
falseValue: {
  type: [String, Number, Boolean],
  required: false,
  default: false,
},
trueValue: {
  type: [String, Number, Boolean],
  required: false,
  default: true,
},
onLabel: {
  type: [String, Object],
  required: false,
  default: ''
},
offLabel: {
  type: [String, Object],
  required: false,
  default: ''
},
classes: {
  type: Object,
  required: false,
  default: () => ({})
},
labelledby: {
  type: String,
  required: false,
},
describedby: {
  type: String,
  required: false,
},

Lightweight Toggle Switches, Vueform Plugin/Github