> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velure.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Toggle Input

> InputToggle.vue Component Documentation

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

<CardGroup cols={2}>
  <Card title="Customizable Sizes" icon="square-1">
    Supports predefined sizes and numeric scaling for the toggle dimensions.
  </Card>

  <Card title="Dynamic Labels" icon="square-2">
    Optionally displays a label alongside the toggle.
  </Card>
</CardGroup>

***

## Usage

### Basic Example

```js theme={null}
import { InputToggle } from '@robojuice/velure-ui';
```

```vue theme={null}
<InputToggle v-model="model" label="This is my toggle label" />
```

### Small Toggle

```vue theme={null}
<InputToggle :size="'small'" v-model="model" label="This is my toggle label" />
```

### Custom Numeric Scaling

```vue theme={null}
<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

<ParamField path="v-model" type="string | number | object | boolean" default="undefined">
  The value bound to the toggle's state (`true`, `false`, `'yes'`, `1`, and `'on'`).
</ParamField>

<ParamField path="type" type="string" default="'text'">
  The input type (not commonly used with this component).
</ParamField>

<ParamField path="size" type="string | number" default="''">
  Defines the size of the toggle. Accepts `'small'` for 75% scaling or a numeric value for proportional scaling.
</ParamField>

<ParamField path="label" type="string" default="undefined">
  Label text displayed alongside the toggle (optional).
</ParamField>

***

## Example Use Cases

### Reactive Toggle

Use `v-model` to bind the toggle state reactively:

```vue theme={null}
<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:

```vue theme={null}
<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.