Vueform Toggle

HTML

<script src="https://unpkg.com/vue/dist/vue.global.js"></script>
<script src="https://unpkg.com/@vueform/toggle"></script>
<link rel="stylesheet" href="https://unpkg.com/@vueform/toggle/themes/default.css">
<div id="app">

  <div class="example">
    <h3 id="example-1">#1 - Default toggle</h3>
    <div class="output">Data: {{ example1.value }}</div>
    <Toggle
      v-model="example1.value"
      v-bind="example1"
    ></Toggle>
<pre v-pre>
  &lt;Toggle
    v-model="value"
  />
</pre>
  </div>
  
  <div class="example">
    <h3 id="example-2">#2 - Toggle with labels</h3>
    <div class="output">Data: {{ example2.value }}</div>
    <Toggle
      v-model="example2.value"
      v-bind="example2"
    ></Toggle>
<pre v-pre>
  &lt;Toggle
    v-model="value"
    on-label="On"
    off-label="Off"
  />
</pre>
  </div>
  
  <div class="example">
    <h3 id="example-3">#3 - Toggle with custom values</h3>
    <div class="output">Data: {{ example3.value }}</div>
    <Toggle
      v-model="example3.value"
      v-bind="example3"
    ></Toggle>
<pre v-pre>
  &lt;Toggle
    v-model="value"
    true-value="on"
    false-value="off"
  />
</pre>
  </div>
  
  <div class="example">
    <h3 id="example-4">#4 - Toggle with custom labels</h3>
    <div class="output">Data: {{ example4.value }}</div>
    <Toggle
      v-model="example4.value"
      v-bind="example4"
    >
      <template v-slot:label="{ checked, classList }">
        <span :class="classList.label">{{ checked ? 'On' : 'Off' }}</span>
      </template>
    </Toggle>
<pre v-pre>
  &lt;Toggle v-model="value">
    &lt;template v-slot:label="{ checked, classList }">
      &lt;span :class="classList.label">{{ checked ? 'On' : 'Off' }}&lt;/span>
    &lt;/template>
  &lt;/Toggle>
</pre>
  </div>
  
</div>

CSS

body {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  background: #f1f1f1;
}

h3 {
  margin-top: 0;
}

.example {
  background: #ffffff;
  margin: 20px;
  border-color: #e7e7e7;
  padding: 40px;
}

.example pre {
  background: #f9f9f9;
  padding: 18px 6px;
  overflow-x: scroll;
  margin-top: 10px;
}

.output {
  font-family: Courier, Courier New, Lucida Console, Monaco, Consolas;
  background: #000000;
  color: #ffffff;
  padding: 20px;
  margin-bottom: 10px;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
}

JavaScript

const app = Vue.createApp({
  data: () => ({
    example1: {
      value: false
    },
    example2: {
      value: false,
      onLabel: 'On',
      offLabel: 'Off',
    },
    example3: {
      value: 'off',
      trueValue: 'on',
      falseValue: 'off',
    },
    example4: {
      value: false,
    }
  })
})

app.component('Toggle', VueformToggle)
app.mount('#app')