Skip to main content
The InputToggle.vue component is a reusable Vue.js Composition API-based toggle switch. It allows for dynamic toggling of boolean or truthy/falsey states, with customizable sizes and labels. This component is ideal for integrating on/off switches within a Vue application.

​
Features

Customizable Sizes

Supports predefined sizes and numeric scaling for the toggle dimensions.

Dynamic Labels

Optionally displays a label alongside the toggle.

​
Usage

​
Basic Example

import { InputToggle } from '@robojuice/velure-ui';

<InputToggle v-model="model" label="This is my toggle label" />

​
Small Toggle

<InputToggle :size="'small'" v-model="model" label="This is my toggle label" />

​
Custom Numeric Scaling

<InputToggle :size="0.5" v-model="model" label="This is my toggle label" />
<InputToggle :size="1.5" v-model="model" label="This is my large toggle label" />

​
Props

​
v-model
string | number | object | boolean
default:"undefined"
The value bound to the toggle’s state (true, false, 'yes', 1, and 'on').
​
type
string
default:"'text'"
The input type (not commonly used with this component).
​
size
string | number
default:"''"
Defines the size of the toggle. Accepts 'small' for 75% scaling or a numeric value for proportional scaling.
​
label
string
default:"undefined"
Label text displayed alongside the toggle (optional).

​
Example Use Cases

​
Reactive Toggle

Use v-model to bind the toggle state reactively: 
<template>
  <InputToggle v-model="toggleState" label="Toggle State" />
</template>

<script setup>
import { ref } from 'vue';

const toggleState = ref(true);
</script>

​
Custom Size Toggle

Define a toggle with a custom scaling factor: 
<InputToggle :size="1.5" v-model="toggleState" label="Large Toggle" />

​
Notes

  • The size prop allows for flexibility in adjusting the toggle’s dimensions:
    • 'small': Scales the toggle to 75% of its default size.
    • Numeric Value: Proportionally scales the toggle dimensions by the given factor.
  • The label prop provides descriptive text next to the toggle for improved clarity and accessibility.