Toggle Input

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

string | number | object | boolean

default:"undefined"

The value bound to the toggle’s state (true, false, 'yes', 1, and 'on').

string

default:"'text'"

The input type (not commonly used with this component).

string | number

default:"''"

Defines the size of the toggle. Accepts 'small' for 75% scaling or a numeric value for proportional scaling.

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.

Setup

Foundations

Inputs

Features

Customizable Sizes

Dynamic Labels

Usage

Basic Example

Small Toggle

Custom Numeric Scaling

Props

Example Use Cases

Reactive Toggle

Custom Size Toggle

Notes

​Features

Customizable Sizes

Dynamic Labels

​Usage

​Basic Example

​Small Toggle

​Custom Numeric Scaling

​Props

​Example Use Cases

​Reactive Toggle

​Custom Size Toggle

​Notes

Features

Usage

Basic Example

Small Toggle

Custom Numeric Scaling

Props

Example Use Cases

Reactive Toggle

Custom Size Toggle

Notes